Jquery 在访问子菜单时，保持父li高亮显示

大家好，当访问子菜单时，我怎么能一直用背景突出显示父级“

li

”，或者在下拉导航菜单上为类提供css中的一些属性？类似的内容将指示它在菜单的哪个部分导航，并且背景将一直高亮显示，直到更改菜单为止

HTML

---

如果我正确理解您的请求，您只需添加

#menu li:hover {
    background: red;
}

---

这是因为当内容处于悬停状态时，下拉父项的li的悬停状态持续存在。

您可以通过jQuery在

元素上添加单击事件来实现。第二级
元素：

$(document).ready(function(){
    $('.secondLevel').find('li').click(function(){

       //removing the previous selected menu state
       $('#menu').find('li.active').removeClass('active');

       //adding the state for this parent menu
       $(this).parents('li').addClass('active');
    });
});

并为菜单创建
活动状态
：

#menu li.active{
    background: #ccddff;
}

活生生的例子：

更新
为了使它同时适用于两个列表，您可以根据列表类添加一个简单的条件：

$('#menu').find('li').click(function(){
   //removing the previous selected menu state
   $('#menu').find('li.active').removeClass('active');

    //is this element from the second level menu?
    if($(this).closest('ul').hasClass('secondLevel')){
         $(this).parents('li').addClass('active');

    //this is a parent element
    }else{
         $(this).addClass('active');
    }
});

活生生的例子：
你能举例说明你的意思吗？我还是有点困惑。当你点击一个子菜单时会发生什么？它是否加载了另一个页面？@chockleyc cand您可以看到左侧的菜单，当选择一个部分时，如何保持不同的背景，我想要一些类似的东西，但在我的例子中，即使在子菜单被访问时，我也想要它。@Steve nope正在通过ajax加载同一页面的其他部分，并且菜单是静态的。我认为OP的意思是为活动的父选项卡显示此背景色，如果活动页面是子菜单项之一，则其中包括活动。@GGJ不悬停我希望在选择子菜单后永久选择“li”顶部菜单。然后Steve使用jQuery向上遍历树并设置类，得到您的答案。解决方案可能会遇到的一个问题是单击a，它调用函数如果停止传播，则li上的单击事件将永远不会触发，此外，如果a元素较小，则li事件可以在不触发链接的情况下触发设置类。是的，类似这样的操作，但我希望在选择子菜单或下拉导航菜单中的其他简单菜单时执行此操作。例如，对于about，不会将活动类放入其中。$（'#menu'）.find（'.active'）.removeClass（'active'）不是更有效，因为removeClass（'active'）只会被调用一次，而不是每li调用一次吗？@GGJ您也可以执行
$（'#menu'）.find（'li.active.removeClass（'active'）.removeClass（'active））如果你愿意的话。@Steve另一个问题，在我的真实菜单中我有3个级别，第一个菜单取消了另一个菜单，第二个菜单取消了下拉列表，我必须用我菜单的las级别修改脚本，对吗？@Burbirstarler如果你打开一个新的问题并提供更多细节，效果会更好。
#menu li.active{
    background: #ccddff;
}

$('#menu').find('li').click(function(){
   //removing the previous selected menu state
   $('#menu').find('li.active').removeClass('active');

    //is this element from the second level menu?
    if($(this).closest('ul').hasClass('secondLevel')){
         $(this).parents('li').addClass('active');

    //this is a parent element
    }else{
         $(this).addClass('active');
    }
});