jQuery-如何將活動類添加到整個導航菜單路徑？

Question

我有一個包含3個級別的菜單，並且我想為第一個活動li使用一個類，並為所有其他后續li使用一個第二類。 當我單擊一個選擇時，第3級將在整個路徑（第1級，第2級，第3級）上保持活動狀態。 如果我單擊級別2上的選擇以保持活動狀態直到級別2。

我有以下幾點：

$(document).ready(function(){
    $('.sf-menu li a').each(function(index) {
        if((this.pathname.trim() == window.location.pathname))
            $(this).parent().addClass("selected");
                var next_li = $(this).parent().next();
            $('a', next_li).addClass("selected2");
    });
});

Answer 1

我想我這次知道了，雖然有點臟，但是可以用。

首先添加類，以便您可以識別第一，第二和第三級<li>元素。 在foreach或制作菜單的任何氣泡中進行操作（或在沒有氣泡的情況下手動進行）：

<ul id="navlist" >
  <li id="home" class="firstLevel">
    <a class="nav" href="home">Home</a>
    <ul class="secondLevel">
        <li class="secondLevel">
            <a class="nav2" href="home">sub-Home1</a>
            <ul>
                <li class="thirdLevel"><a class="nav3" href="home">sub-sub-Home1></a></li>
                <li class="thirdLevel"><a class="nav3" href="home">sub-sub-Home1></a></li>
            </ul>
        </li> 
        <li><a class="nav2" href="home">sub-Home2</a></li> 
    </ul>
  </li>

  <li id="about" class="firstLevel">
    <a class="nav" href="about-us">About Us</a>
  </li>
</ul>

然后使用jQuery closest 。 它遍歷DOM樹並匹配最接近的項目，您可以傳遞選擇器（我們剛剛創建的firstLevel或secondLevel類）：

$('#navlist a').on('click', function (e) {
            e.preventDefault(); //prevent the link from being followed
            $('#navlist a').removeClass('selected');
            $('#navlist a').removeClass('selected2');
            $(this).closest('.secondLevel').children('a').addClass('selected2');
            $(this).closest('.firstLevel').children('a').addClass('selected2');
            $(this).addClass('selected');
        });

然后添加!important在所選類（所以當有一個像colision在關於我們友情連接選擇的是應用類）。 這是最臟的部分。

檢查工作的小提琴： https ： //jsfiddle.net/4r5vg/661/