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

我有一个3级菜单，我想为第一个活动li使用一个类，为所有其他后续li使用第二个类。当我单击一个选择时，级别3将在整个路径（级别1、级别2、级别3）中保持活动状态。如果我单击level 2上的某个选择以在level 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");
    });
});

---

我想这次我拿到了，虽然有点脏，但效果不错

首先添加类，以便可以识别第一级、第二级和第三级

元素。在foreach或任何制作菜单的bucle中进行操作（如果没有bucle，则手动操作）：

然后添加

！重要信息

到所选类别（因此，当出现类似于“关于我们”链接中的冲突时，所选类别即为应用的类别）。这是最脏的部分

---

检查一把小提琴：

你能再解释一下吗？描述你到底想要什么，并用html写下菜单的样子。如果我理解得很好，我认为你可以用CSS伪类做你想要做的事情。看看这个提琴：玩那些：hover，：first child我上传了一张图片了解更多细节。你能添加带有注释的html吗？我还不太明白你想要什么。

<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>

$('#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');
        });