使用Javascript使用子菜单突出显示当前页面链接

我试图突出显示当前页面链接，如下所示。。。

多亏在我之前提出这一问题的其他人，我才能够正确地做到这一点

但是，我的导航栏有一个子菜单

每当我在子菜单中时，我都试图突出显示它的父菜单。但是，每当我从一个父菜单（例如“主菜单”）转到另一个父菜单（例如“被转移者”）的子菜单时，这种情况就会发生

这是菜单的html

<ul id = "nav">
<li><a href = "Index.html">MAIN</a></li>
<li><a href = "About.html">ABOUT US</a></li>
<li><a href = "Admission.html">ADMISSION</a>
    <ul class = "sub">
        <li><a href = "Freshmen.html">FRESHMEN</a></li>
        <li><a href = "Transfer.html">TRANSFEREES</a></li>
    </ul>
</li>   
</ul>

还有CSS

ul#nav li.active{
background:#9993a6;}

---

我已经试着到处寻找解决方案，我是Javascript的新手，所以如果你们中有人能帮我。。。我真的很感激。。。提前感谢。

删除活动类的方式是错误的，因为addClass不返回jQuery对象，所以不能在其上使用同级（）

我还认为最好使用父母而不是最亲近的人，你应该尝试以下方式：

$('ul#nav li a').click(function(){
    var listElement = $(this).parents('ul#nav li');
    listElement.addClass('active');
    listElement.siblings().removeClass('active');
    return false;
});

---

尝试删除列表及其子列表中每个列表项的活动类，然后将活动类添加到所需的项中，否则将不得不控制太多的情况

代码如下：

$('ul#nav li a').click(function(){
    $('#nav li').removeClass('active');
    $(this).addClass('active');
    var possibleParent = $(this).parents('#nav li');
    if (possibleParent) possibleParent.addClass('active');
});

---

这里有一个代码笔演示：

Java与Javascript无关，它们是完全不同的语言和环境……对不起那个人。我也试过了，对我来说效果很好。。。下次我会记住你的建议-D

$('ul#nav li a').click(function(){
    $('#nav li').removeClass('active');
    $(this).addClass('active');
    var possibleParent = $(this).parents('#nav li');
    if (possibleParent) possibleParent.addClass('active');
});