html 使用twitter引导程序防止子元素崩溃

xe55xuns 于 2022-12-02 发布在其他

关注(0)|答案(4)|浏览(135)

我有以下列表：

根目录
儿童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，它应该会隐藏子节点（也适用）
1.一旦显示了孩子，我点击一个孩子。这个点击将触发折叠并再次隐藏孩子。（这是我试图阻止的）
jsfiddle：http://jsfiddle.net/MgcDU/4537/的参数值

Html

来源：https://stackoverflow.com/questions/16687960/prevent-child-element-from-collapsing-with-twitter-bootstrap

4条答案

按热度按时间

k75qkfdt1#

将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事件并触发collapse。将这些属性放在子元素中会将click事件处理的范围限制为该元素（及其子元素）。

赞(0）回复(0）举报 2022-12-02

j5fpnvbx2#

我相信你要做的是防止#root在它的一个子li被点击时最小化？如果是这样，你要找的就是event.stopPropogation。
尝试将以下代码添加到JSFiddle：

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

这将以li子元素为目标，并防止它们的click事件冒泡到具有collapse属性的li父元素。

赞(0）回复(0）举报 2022-12-02

vqlkdk9b3#

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

赞(0）回复(0）举报 2022-12-02

mo49yndu4#

由于li标记是ul#root的后代，因此无法在不折叠li子元素的情况下折叠根。折叠根时，li子标记将不可见。

赞(0）回复(0）举报 2022-12-02

我来回答

html 使用twitter引导程序防止子元素崩溃

4条答案

相关问题

热门标签

最新问答