JQuery: 如何给嵌套元素一个一个地添加一个class？

Question

好的，我正在创建一个多级菜单，当一个 sub-menu 打开时，所有其他菜单都关闭，除非 sub-menu 嵌套了另一个 sub-menu，在在这种情况下，除了 parent 和当前的 sub-menu.

之外，所有其他 sub-menu 都已关闭

我用这段代码来解决问题：

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

在此示例中，出于演示目的仅使用颜色更改，但问题是相同的，单击一个 <li> 元素并将颜色更改为下一个 <ul>children。我的代码运行得不是很好，单击时将所有嵌套的 <ul> 更改为红色。有什么问题？请帮助，提前致谢。

问题示例： 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');
});

工作 fiddle - https://jsfiddle.net/ttkqqd64/2/

Answer 2

使用 stopPropagation 来阻止 li 的父级接收点击事件。然后只把红色的class应用到李兄的身上。

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

JQuery: 如何给嵌套元素一个一个地添加一个class？

JQuery: How to add a class to nested elements, one by one?

html

jquery

nested

menu

list