使用twitter bootstrap防止子元素崩溃

Question

我有以下列表:

• 根
  • Child1
  • CHILD2

根应该是可折叠的,但不是孩子.如果单击其中一个代码,则以下代码将崩溃.如何防止儿童瘫倒？

<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它应该显示孩子(使用上面的代码),如果我再次点击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元素中会使该元素及其所有子元素捕获单击事件并触发折叠.将属性放入子元素会将单击事件处理的范围限制为该元素(及其子元素).