Bootstrap 禁用数据切换元素中链接的折叠

u59ebvdq 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(1)|浏览(167)

我有一个折叠面板主体，如下所示（the fiddle，现在有固定的代码）：

<div class="panel panel-default">
    <div class="panel-heading">
        <div class="panel-title" data-toggle="collapse" href="#collapseOne">
            <a href="#">1) collapsing link</a>
            <a href="#">2) not collapsing link</a>
        </div>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">Anim pariatur cliche ...</div>
    </div>
</div>

数据切换设置在面板标题上，因为我想在它的任何地方点击以打开另一个面板。除了第二个链接。我的目标是禁用第二个链接的折叠行为。实现这一目标的最佳/最简单的方法是什么？

重要提示：我不想只在第一个链接上设置数据切换。我想在面板上的任何地方点击来触发事件，除了第二个链接。

twitter-bootstrap

来源：https://stackoverflow.com/questions/24123941/disable-collapse-for-link-in-a-data-toggle-element

1条答案

按热度按时间

zqdjd7g91#

你需要为那些你不想触发collapse事件的元素添加一个类，然后通过javascript停止事件传播。

<div class="panel panel-default">
    <div class="panel-heading">
        <div class="panel-title" data-toggle="collapse" href="#collapseOne">
            <a href="#">1) collapsing link</a>
            <a href="#" class="no-collapsable">2) not collapsing link</a>
        </div>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">Anim pariatur cliche ...</div>
    </div>
</div>

停止事件传播，如下所示：

$('.no-collapsable').on('click', function (e) {
    e.stopPropagation();
});

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

我来回答

Bootstrap 禁用数据切换元素中链接的折叠

1条答案

相关问题

热门标签

最新问答