点击儿童列表项时手风琴菜单关闭的问题

Question

我正在尝试创建手风琴菜单，以便当您单击父项li项目时，子项列表项将展开。

我与我的JS遇到的问题是，由于子列表位于父项li项下，因此当您单击子项时，它将关闭元素。

你可以看到我的代码在这里：https://jsfiddle.net/rdjv6z4a/

最终，我只希望项目在任何特定时间开放的一个，但我不希望父项关闭当你点击子列表项。

有没有人看到我犯了我的错误？

Answer 1

添加stopPropagation到子UL或李

$(document).on("click", "#filter-options li.options ul", function(e) { 
    e.stopPropagation(); 
}); 

的问题是因为事件冒泡的，在子UL点击冒泡的DOM的文档，除非stopPropagation被击中，并在它的方法了它会触发父母.options的点击并切换菜单。

Answer 2

有很多方法可以检查事件是否由父项而不是从子项触发。在您的情况下执行此操作的一种快速方法是将单击事件的选择器更改为#filter-options li.options > span：

$(document).on("click", "#filter-options li.options > span", function() { 
     var $option = $(this).parent(); // this will be the parent item 
     $("#filter-options li.options ul").slideUp(); 
     $("#filter-options li.options i").removeClass("fa-caret-down").addClass("fa-caret-up"); 
     if ($option.hasClass("active")) { 
      $option.find("i").removeClass("fa-caret-down").addClass("fa-caret-up"); 
      $option.removeClass("active"); 
      $option.find("ul").slideUp(); 
     } else { 
      $option.find("i").removeClass("fa-caret-up").addClass("fa-caret-down"); 
      $option.addClass("active"); 
      $option.find("ul").slideDown(); 
     } 
     return false; 
     });