如何在选择父对象的子对象时使父对象处于活动状态

Question

我有一个带下拉菜单的标题，还有一个大下拉菜单。到目前为止，我进行了合并，以使父对象高亮显示，但当单击子对象时，它就不起作用了。我已经搜索并尝试了我能找到的一切，但没有成功。我有这样的：在标题的顶部和每个下拉链接上："，这对父级非常有效，但父级的子级不会使父级处于活动状态。下面是我的下拉列表示例：

<li class="dropdown">
<a class="dropdown-item dropdown-toggle <?= ($activePage == 'Link1') ? 'active':''; ?>" href="#">Link1</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="dropdown-item"  <?= ($activePage == 'Link2') ? 'active':''; ?>" href="#">Link2</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item <?= ($activePage == 'Link3') ? 'active':''; ?>" href="#">Link3</a></li>
<li class="dropdown-submenu">
<a class="dropdown-item <?= ($activePage == 'Link4') ? 'active':''; ?>" href="#">Link4</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item <?= ($activePage == 'Link5') ? 'active':''; ?>" href="#">Link5</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="dropdown-item"  <?= ($activePage == 'Link6') ? 'active':''; ?>" href="#">Link6</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item <?= ($activePage == 'Link7') ? 'active':''; ?>" href="#">Link7</a></li>
<li class="dropdown-submenu">
<a class="dropdown-item <?= ($activePage == 'Link8') ? 'active':''; ?>" href="#">Link8</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item <?= ($activePage == 'Link9') ? 'active':''; ?>" href="#">Link9</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="dropdown-item <?= ($activePage == 'Link10') ? 'active':''; ?>" href="#">Link10</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item <?= ($activePage == 'Link11') ? 'active':''; ?>" href="#">Link11</a></li>
<li class="dropdown-submenu">
<a class="dropdown-item <?= ($activePage == 'Link12') ? 'active':''; ?>" href="#">Link12</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item <?= ($activePage == 'Link13') ? 'active':''; ?>" href="#">Link13</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>

我如何使它与php一起工作，或者根本不能做到这一点？？？？

Answer 1

看起来像引导程序。这里有一个javascript 的例子

//APP/assets/js/APP.js导入'/css/nav.scss'；

// Need jQuery? Install it with "yarn add jquery", then uncomment to require it.
const $ = require('jquery');
import 'bootstrap'; //add functions to jQuery
//uncomment to support legacy code
global.$ = $;
//navigation active class settings
$(document).ready(function () {
$(function () {
var current_page_URL = location.href;
$("a").each(function () {
if ($(this).attr("href") !== "#") {
var target_URL = $(this).prop("href");
if (target_URL == current_page_URL) {
$('nav a').parents('li, ul').removeClass('active');
$(this).parent('li').addClass('active');
return false;
}
}
});
});
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
});

//APP/templates/base.html.twig

...
{% block javascripts %}
{{ encore_entry_script_tags('app') }}

{% endblock %}