0

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

問題：最初のサブリストで機能しますが、次のサブリストをさらに深くクリックすると、次に深いリストと外側のリストが選択され、結果としてリスト全体が折りたたまれます。

私は何が間違っているのですか？助言がありますか？

4

2 に答える 2

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

デモ

ノート

あなたは使用する必要はありません.children()、.find()あなたの仕事を達成します。

.stopImmediatePropagation（）は、残りのハンドラーが実行されないようにし、イベントがDOMツリーをバブリングするのを防ぎます。

.stopImmediatePropagation（）についてもっと読む

于 2012-06-21T03:32:46.327 に答える
1

あなたの機能は正しいです。もう 1 行追加する必要がありますevent.stopImmediatePropagation()。

$('.list_folder').on('click',function(event){
  /* add one more line */
  event.stopImmediatePropagation();
  $(this).children('.hide_list').slideToggle();
}
于 2014-03-28T17:34:32.763 に答える