jquery - jquery 最低嵌套选择器

Question

我想为以下代码滑动“.sub-menu”选择器的所有子项：

<div ID="browse_container">
    <div class="sub-menu">Root
        <div class="sub-menu">▷ English</div>
        <div class="sub-menu">▷ Maths
            <div class="sub-menu">Year 1</div>
            <div class="sub-menu">Year 2</div>
        </div>
        <div class="sub-menu">▷ Science</div>
    </div>
</div>

我的jQuery是：

$(document).ready(function() {
    $('.sub-menu').live('click', function(){
        $(this).children().slideUp()
    })
});

但这会向上滑动“Root”，因为例如“english”的子项都是“Root”的子项。我可以告诉 jquery 选择较低的嵌套“子项”吗？

Answer 1

$(document).ready(function() {
  $('.sub-menu').on('click', function(event){
    event.stopPropagation();
    $(this).children().slideUp();
  });
});

演示

您可以阻止事件“冒泡 DOM 树，阻止任何父处理程序收到事件通知”。

现在，当您单击 时Maths，只有孩子向上滑动。