根据 URL 设置菜单项活动

Question

我一直在非常努力地完成我想要完成的事情，但我无法让它按照我想要的方式工作。我有一个带有一级菜单项 (duh) 和二级菜单项的导航菜单。它看起来像这样：

<ul class="nav" id="side-menu">
    <li>
        <a href="/admin/">Dashboard</a>
    </li>
    <li>
        <a href="/admin/pages/">Pages</a>
    </li>
    <li>
        <a href="#">Users<span class="fa arrow"></span></a>
        <ul class="nav nav-second-level">
            <li>
                <a href="/admin/users/">All users</a>
            </li>
            <li>
                <a href="/admin/users/roles/">Roles</a>
            </li>
        </ul>
    </li>
</ul>

我正在使用以下 jQuery 函数将 active class 添加到活动菜单项：

function setActive() {
    var url = window.location;
    var element = $('ul.nav a').filter(function() {
        return this.href == url || url.href.indexOf(this.href) == 0;
    }).addClass('active').parent().parent().addClass('in').parent();

    if (element.is('li')) {
        element.addClass('active');
    }
    // Remove active class from A element if the page isn't the dashboard.
    if (location.pathname !== '/admin/' && $('[href="/admin/"]').hasClass('active')) {
        $('[href="/admin/"]').removeClass('active');
    }
};

这适用于所有一级菜单项和二级菜单项 All users，但是当我转到 /admin/users/roles/ 时，它使 All users 和 Roles 活跃。当我去 /admin/users/roles/add/ 时，同样的事情发生了。我认为发生这种情况是因为代码使所有菜单项都处于活动状态，看起来像 window.location，但我不知道如何在我转到 /admin/users/roles/ 和 [= 时仅使 Roles 处于活动状态18=],等等

我真的希望有人能帮我解决这个问题。可以的话我请你喝啤酒

Answer 1

试试这个..

var loc = window.location.pathname;

   $('#side-menu').find('a').each(function() {
     $(this).toggleClass('active', $(this).attr('href') == loc);
  });

并在 href i.e.http://yourdomain.com//admin/users/roles/

中使用完整的绝对路径

根据 URL 设置菜单项活动

Set menu item active based on URL

javascript

jquery

menu

submenu

drop-down-menu