防止面板在标题子元素点击时折叠

Question

我已经准备了一个演示在这里。

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

源代码：

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>

附言：如果此问题已经被问过，我很抱歉，很难为我形成一个标题来找到这个问题。

- php_nub_qq

Answer 1

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

演示

当然，这也可能会影响按钮的预期功能。为了得到更好的答案，请解释它将执行什么操作。

- isherwood

Answer 2

您可能想要使用stopPropagation函数

并使用JavaScript来实现：

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

请查看这个代码片段

示例

- DJG22