twitter-bootstrap 禁用数据切换元素中链接的折叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24123941/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable collapse for link in a data-toggle element
提问by Karol
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.
重要提示：我不想只在第一个链接上设置数据切换。我想点击面板上的任何地方来触发偶数，除了第二个链接。
回答by Jorge García
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.
您需要为那些不想触发折叠事件的元素添加一个类，然后通过 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>
Stop the event propagation like this:
像这样停止事件传播：
$('.no-collapsable').on('click', function (e) {
e.stopPropagation();
});
