jquery - 为当前菜单设置 css 事件类

Question

我尝试编写一个函数来设置菜单的当前事件状态，但我的菜单需要 2 个字段

class="current"and class="current selectedLava"

我的菜单:

<nav>
<ul class="sf-menu">
    <li><a href="Default.aspx">Home</a>
        <ul>
            <li><a href="About.aspx">Home Cinema</a></li>
        </ul>
    </li>
    <li><a href="Home_Movie.aspx">Movie</a>
        <ul>
            <li ><a href="List_Movie.aspx">List Movie</a></li>
            <li ><a href="abc.aspx">List</a></li>
    </li>

</ul><!-- end menu -->

我的意思是当我访问 Home_Movie.aspx 时，它将是

        <li class="current selectedLava"><a href="Home_Movie.aspx">Movie</a>
        <ul>
            <li><a href="List_Movie.aspx">List Movie</a></li>
            <li ><a href="abc.aspx">List</a></li>
    </li>

当我访问 List_Movie.aspx 时，它将是

        <li class="current selectedLava"><a href="Home_Movie.aspx">Movie</a>
        <ul>
            <li class="current"><a href="List_Movie.aspx">List Movie</a></li>
            <li ><a href="abc.aspx">List</a></li>
    </li>

简单易懂:

1:http://s30.postimg.org/cx4ks87y9/image.png

2:http://s30.postimg.org/p09wfsj0h/image.png

Answer 1

我认为您将 highlightActiveMenuItem 方法替换为:

highlightActiveMenuItem = function () {
    var url = window.location.pathname.substr(6);    
    $('nav li a[href="' + url + '"]').parent().addClass('current');
    if ($('nav li a[href="' + url + '"]').parent().parent().hasClass('sf-menu'))
    {
      $('nav li a[href="' + url + '"]').parent().addClass('selectedLava');
    }
    else
    {
      $('nav li a[href="' + url + '"]').parent().parent().parent().addClass('current selectedLava');  
    }
}

或者为顶级菜单项使用特定类以避免三重 parent()