javascript - 如何使引导导航下拉项处于事件状态？

Question

我有一个引导导航栏，我试图在页面重新加载后使所选元素保持事件状态。我在下面有这个脚本，它适用于普通元素。

$(document).ready(function () {
    var url = window.location;

    $('ul.navbar-nav a[href="'+ url +'"]').parent().addClass('active');

    $('ul.navbar-nav a').filter(function() {
        return this.href == url;
    }).parent().addClass('active');
});

但是当涉及到导航栏元素的下拉类型时，我的代码不起作用。这是我的导航栏。

<ul class="navbar-nav mr-auto" id="navbar-list">
    <li class="nav-item admin-menu">
        <a class="nav-link" href="{{ route('teams.index') }}">Takımlar</a>
    </li>
    <li class="nav-item dropdown admin-menu">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Hakem Yönetimi
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="nav-link" href="{{ route('referees.index') }}">Hakamler</a>
            <a class="nav-link" href="{{ route('referees.index') }}">Hakem Atamalar</a>
        </div>
    </li>
    <li class="nav-item admin-menu">
        <a class="nav-link" href="{{ route('reports.index') }}">Haberler</a>
    </li>
</ul>

我该如何解决这个问题？

如有任何帮助，我们将不胜感激。

Answer 1

因为下拉列表中的a链接的父级不同于nav-item，所以“active”类被分配给dropdown-menu类导航栏元素。

我认为应该是:

$(document).ready(function () {
    var url = window.location;
    $('ul.navbar-nav a[href="'+ url +'"]').parents('.nav-item').addClass('active');
});

此外，JQuery parent 方法仅搜索 1 个父级别。