Question

好的，我正在创建一个多级菜单，当一个子菜单打开时所有其他子菜单都关闭，除非子菜单有另一个嵌套的子菜单，在这种情况下所有其他子菜单关闭除父级和当前子菜单外。

我使用这段代码诀窍：

$('li').on('click', function(){
 $('li').not(this).each(function(){
  $(this).find('ul').removeClass('red');
 });
 $(this).find('ul').addClass('red');
});

在此示例中，仅使用颜色更改进行演示，但问题是相同的，请单击一个＆lt; li ＆gt;元素并将颜色更改为下一个＆lt; ul ＆gt;儿童。我的代码不能很好地工作，点击更改为红色所有嵌套的＆lt; ul ＆gt;。有什么问题？请帮助，提前谢谢。

问题示例： https://jsfiddle.net/EddyRocket/ttkqqd64/1/

Answer 1

主要问题是当你执行$('li').on(...)时，你正在为每个li创建一个事件处理程序。因此，当您单击子级别时，它还会触发所有父级别的点击事件。

您可以在主ul上创建一个事件，并从单个函数处理所有事件：

$('.menu').on('click', function(e){
    // get clicked item
    var clickedItem = $(e.target).closest('li')[0];
    // remove all active classes
    $('.menu ul').removeClass('red')
    // find the ul inside the clicked item
    .filter(function(_index, _ul){
        return $.contains(clickedItem, _ul);
    })
    // add active class
    .addClass('red');
});

工作小提琴 - https://jsfiddle.net/ttkqqd64/2/

Answer 2

使用stopPropagation阻止父li接收click事件。然后只将红色类应用于兄弟姐妹。

$('li').on('click', function(ev){
 ev.preventDefault();
 ev.stopPropagation();
 $(this).siblings().find('ul').removeClass('red');
 $(this).find('ul').addClass('red');
});

JQuery：如何逐个向嵌套元素添加类？

2 个答案: