根据 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 类添加到活动菜单项：

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/ 和/admin/users/roles/add/ 等时，我不知道如何只使Roles 处于活动状态。

我真的希望有人可以帮助我解决这个问题。如果可以，我请你喝啤酒。

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/中使用完整的绝对路径