防止在标题子元素单击时面板折叠答案

【问题标题】：Prevent panel collapse on heading child element click防止在标题子元素单击时面板折叠
【发布时间】：2015-10-03 05:39:06
【问题描述】：

我准备了一个演示here。

我想通过单击面板标题来切换面板主体。但是，如果标题中有按钮，我希望它们不要切换面板主体，我该怎么做？

源代码：

HTML

<div class="panel panel-default">
    <div class="panel-heading clearfix"  data-toggle="collapse" data-target="#body">
        <span>Text</span>
        <button class="btn btn-default pull-left">Button</button>
    </div>

    <div class="panel-body collapse" id="body">
        asd
    </div>
</div>

P.S.：如果已经问过这个问题，我很抱歉，我很难形成一个标题来找到这个问题。

【问题讨论】：

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

$('.panel-heading .btn').click(function (e) {
    e.stopPropagation();
});

Demo

当然，这也会影响按钮的预期功能。解释它将做什么以获得更好的答案。

【讨论】：

【解决方案2】：

你可能想使用 stopPropagation

并使用javascript来实现：

window.noCollapse = function(e) {
    e.stopPropagation();
}

检查这个小提琴

Example

【讨论】：