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

时间:2015-07-14 14:09:19

标签: javascript jquery html twitter-bootstrap

我准备了一个演示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。:我很抱歉,如果已经提出这个问题,我很难找到一个标题来发现这个问题。

2 个答案:

答案 0 :(得分:8)

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

<强> Demo

当然,这也可能影响按钮的预期功能。解释它将为更好的答案做些什么。

答案 1 :(得分:2)

您可能想要使用stopPropagation

使用javascript实现它:

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

检查这个小提琴

Example