jquery - 仅从子列表中选择 children()

Question

的HTML：

<ul class="main_list">
    <li class="list_folder">One</li>
    <li class="list_folder">Two</li>
    <li class="list_folder">New list <ul class="hide_list">
            <li class="list_folder">New one</li>
            <li class="list_folder">New Two</li>
            <li class="list_folder">Third list<ul class="hide_list">
                    <li class="list_folder">Third one</li>
                    <li class="list_folder">Third two</li>
                </ul></li>
        </ul></li>
</ul>

我想要做什么：所有具有“hide_list”类的子列表都被CSS隐藏。当我单击包含隐藏列表的 li 时，我希望该隐藏列表切换打开/关闭。我的jQuery代码：

$('.list_folder').on('click',function(){
    $(this).children('.hide_list').slideToggle();
}

问题：它适用于第一个子列表，但是当我单击下一个子列表更深时，它将选择下一个更深的列表以及外部列表，结果整个列表将折叠。

我究竟做错了什么？有什么建议么？

Answer 1

$('.list_folder').on('click',function(e){
    e.stopImmediatePropagation();
    $(this).find('.hide_list:first').slideToggle();
});

演示

笔记

你不需要使用.children()，.find()就会完成你的工作。

.stopImmediatePropagation() 阻止其余的处理程序被执行，并防止事件在 DOM 树中冒泡。

阅读更多关于.stopImmediatePropagation()

Answer 2

你的功能是正确的。您必须再添加一行event.stopImmediatePropagation()。

$('.list_folder').on('click',function(event){
  /* add one more line */
  event.stopImmediatePropagation();
  $(this).children('.hide_list').slideToggle();
}