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();
  });
});

Demo

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

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