javascript - 使用 twitter bootstrap 防止子元素崩溃

Question

我有以下列表:

• 根
  • child 1
  • 子2

根应该是可折叠的，但子项不是。使用以下代码，如果我单击其中之一，两者都会崩溃。如何才能避免 child 摔倒？

<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. 根目录从一开始就被折叠。如果我单击 root，它应该显示子级(适用于上面的代码)，如果我再次单击 root，它应该隐藏子级(也可以)
2. 显示子项后，我单击一个子项。此单击将触发折叠并再次隐藏子项。 (这就是我试图阻止的)

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

Answer 1

将 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 元素中会使该元素及其所有子元素捕获单击事件并触发折叠。将属性放入子元素会将单击事件处理的范围限制为该元素(及其子元素)。