jquery最低嵌套选择器

Question

我想为下面的代码slideUp ".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()
    })
});

但是这向上滑动了“根”，因为例如"english“的子项都是”根“的子项。我可以告诉jquery选择下面嵌套的“子项”吗？

Answer 1

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

Demo

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

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