2

次のコードの「.sub-menu」セレクターのすべての子をslideUpしたいと思います。

<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」のサブアイテムはすべて「Root」の子であるため、これは「Root」を上にスライドします。ネストされた下位の「サブアイテム」を選択するようにjqueryに指示できますか？

4

1 に答える 1

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

デモ

イベントが「DOM ツリーをバブリングして、親ハンドラーにイベントが通知されないようにする」ことを防ぐことができます。

をクリックするMathsと、子だけが上にスライドします。

于 2012-10-14T20:28:57.027 に答える