1

次のリストがあります。

  • 根
    • 子1
    • 子2

ルートは折りたたむことができますが、子は折りたたむことができません。次のコードでは、どちらかをクリックすると両方が折りたたまれます。子供が倒れないようにするにはどうすればよいですか？

<li data-toggle="collapse" data-target="#root"><a href="#">Root</a>
    <ul class="nav nav-list collapse" id="root">
        <li><a href="some_url">Child1</a></li>
        <li><a href="some_url">Child2</a></li>
    </ul>
</li>

編集：私が欲しいものを説明するためのより良いアプローチ。

  1. ルートは最初から折りたたまれています。ルートをクリックすると、子が表示され（上記のコードで動作します）、ルートを再度クリックすると、子が非表示になります（動作します）
  2. 子供が表示されたら、子供をクリックします。このクリックで折りたたみがトリガーされ、子が再び非表示になります。（これは私が防止しようとしているものです）

jsfiddle: http://jsfiddle.net/MgcDU/4537/

4

4 に答える 4

5

data-toggleおよびdata-target属性をa要素に移動します。

<li><a href="#" data-toggle="collapse" data-target="#root">Root</a>
    <ul class="nav nav-list collapse" id="root">
        <li><a href="#">Child1</a></li>
        <li><a href="#">Child2</a></li>
    </ul>
</li>

それらを最上位のli要素に配置すると、その要素とそのすべての子がクリックイベントをキャッチし、折りたたみをトリガーします。属性を子要素に配置すると、クリック イベント処理の範囲がその要素 (およびその子要素) だけに制限されます。

于 2013-05-22T11:07:57.440 に答える
2

あなたがやろうとしているのは、その子の1つがクリック#rootされたときに最小化 されないようにすることだと思いますか? liもしそうなら、探しているのはevent.stopPropogationです。

次のコードを JSFiddle に追加してみてください。

$('ul > li').on('click', function(e) { e.stopPropagation(); });

これは子要素を対象とし、それらのクリック イベントが折りたたみ属性を持つli親にバブリングするのを防ぎます。li

于 2013-05-22T10:31:35.093 に答える
1 
$("#root a").click(function (e) {
    return false;
});
于 2013-07-22T05:39:13.160 に答える
0

liタグは の子孫であるため、子要素ul#rootを折りたたむことなくルートを折りたたむ方法はありません。liルートが折りたたまれている場合、子liタグは表示されません。

于 2013-05-22T09:18:01.007 に答える