防止子元素与Twitter Bootstrap崩溃

Question

我有以下清单：

• 根
  • 儿童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. 根从一开始就崩溃了。 如果我单击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元素中会使该元素及其所有子元素捕获click事件并触发崩溃。 将属性放在子元素上会将单击事件的处理范围限制为仅该元素（及其子元素）。

Answer 2

我相信您要执行的操作是防止#root的子级li被单击时使其最小化？ 如果是这样，您正在寻找的是event.stopPropogation 。

尝试将以下代码添加到您的JSFiddle中：

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

这以子li元素为目标，并通过折叠属性防止其单击事件冒泡到父li 。

Answer 3

$("#root a").click(function (e) {
    return false;
});

Answer 4

由于li标签是ul#root后代，因此如果不折叠子li元素，则无法折叠root。 当root折叠时，子li标签将不可见。