禁用折叠以关闭数据切换元素中的链接 [英] Disable collapse for link in a data-toggle element

问题描述

我有一个折叠的面板主体，像这样(小提琴，现在具有固定代码):

I have a collapsing panel body, like this (the fiddle, which now has the fixed code):

<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>

数据切换设置在面板标题上，因为我希望单击它的任意位置以打开另一个面板.除了第二个链接.我的目标是禁用第二个链接的崩溃行为.最好/最简单的方法是什么?

The data-toggle is set on the panel title, because I want a click anywhere on it to open the other panel. Except the second link. My goal is to disable the collapsing behavior for the second link. What is the best/simplest way to achieve that?

重要:我不想仅在第一个链接上设置数据切换.我希望在面板上的任意位置单击以触发偶数，但第二个链接除外.

Important: I do not want to set the data-toggle on the first link only. I want a click anywhere on the panel to trigger the even, except on the second link.

推荐答案

您需要为不想触发崩溃事件的那些元素添加一个类，然后停止通过javascript传播事件.所以...这是正确的答案.

You need to add a class for those elements that you don't want to fire the collapse event and then stop the event propagation via javascript. So... here is the correct answer.

<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();
});

这篇关于禁用折叠以关闭数据切换元素中的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！