jquery - 在多级列表上使用滑动切换时，第 2 级将如同单击了第 1 级一样

Question

我正在尝试使用列表进行多级导航，但是当我切换第一个级别并单击第二个级别以显示第三个级别时，第二个级别会切换。想知道这个问题是否有解决办法？

到目前为止我的代码:

 $(document).ready(function(){
    $(".listSchool").click(function(){
    $(this).children("ul").children().slideToggle();
});

$(".listClass").click(function(){
    $(this).children("ul").children().slideToggle();
});
});

Answer 1

您想要停止事件冒泡。

基本上，当您单击内部元素时，父元素也会被单击。如果该父级有一个绑定(bind)为点击的事件，则会触发该事件。

使用event.stopPropagation();应该可以防止这种情况。

jQuery API - event.stopPropagation

$(document).ready(function(){
   $(".listSchool, .listClass").click(function(event){
     event.stopPropagation();
     $(this).children("ul").slideToggle();
   });
});