根据URL设置菜单项处于活动状态

时间:2015-12-02 10:21:38

标签: javascript jquery drop-down-menu menu submenu

我一直在努力完成我想要完成的任务,但我不能按照我想要的方式工作。我有一个带有第一级菜单项(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和{{1}活跃的。当我去Roles时,会发生同样的事情。我认为这是因为代码使所有菜单项都处于活动状态,看起来像/admin/users/roles/add/,但我不知道当我转到window.location和{{{{}}时,如何仅激活Roles 1}}等等。

我真的希望有人可以帮助我。如果可以,我会给你买啤酒。

1 个答案:

答案 0 :(得分:0)

试试这个..

i.e.http://yourdomain.com//admin/users/roles/

和href {{1}}

中的完整绝对路径