javascript - 使用 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-toggleanddata-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元素中会使该元素及其所有子元素捕获点击事件并触发折叠。将属性放在子元素上会将点击事件处理的范围限制为该元素（及其子元素）。

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元素的情况下无法折叠根。当根被折叠时，子li标签将不可见。