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>

编辑：更好地描述我想要的东西。

Root从一开始就崩溃了。如果我点击root它应该显示孩子（使用上面的代码），如果我再次点击root它应该隐藏孩子（也可以）#Ii / li>
一旦孩子出现，我点击一个孩子。此单击将触发折叠并再次隐藏子项。（这是我想阻止的）

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

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时，将无法看到子li标记。

使用twitter bootstrap防止子元素崩溃

4 个答案: