Question

我有一个bootstrap导航栏，我试图在页面重新加载后保持所选项目处于活动状态。我在下面有这个脚本，它适用于普通项目。

$(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不同，因此“活动”级别会分配给dropdown-menu级而不是导航栏项。

我认为应该是：

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

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

如何激活bootstrap导航下拉项？

1 个答案: