Jquery-如何将活动类添加到整个导航菜单路径中

Jquery - How to add active class to entire navigation menu path?

本文关键字：导航 菜单 路径 添加 活动 Jquery-      更新时间：2023-10-21

我有一个有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");
    });
});

我想我这次拿到了，它有点脏，但它能工作。

首先添加类，以便可以识别第一、第二和第三级<li>元素。在foreach中执行，或在菜单中使用任何bucle（如果没有这样的bucle，则手动执行）：

<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添加到选定的类中（因此，当存在类似于About Us链接中的共线时，即为应用的类）。这是最脏的部分。

检查工作小提琴：https://jsfiddle.net/4r5vg/661/

相关文章：