单击标题中的按钮时如何防止手风琴切换？ [英] How to prevent accordion from toggling when button in header is clicked?

问题描述

我正在使用bootstrap的手风琴类，并希望在标题中有按钮可以点击而不切换手风琴。以下是HTML示例：

I'm using bootstrap's accordion class and want to have buttons in the header that can be clicked without toggling the accordion. Here's example HTML:

<div class="body">
    <div class="panel panel-default" style="width: 80%">
        <div class="panel-heading" data-toggle="collapse" data-target="#container1" style="cursor: pointer;">
            <h4 class="panel-title" style="display: inline-block;">
               title
            </h4>
        <div style="float: right; width: 130px; text-align: right;"><span style="color: red;">test</span></div>
            <button type="button" class="btn btn-xs btn-primary" style="float: right;" onclick="foo(event);">Button</button>
    </div>
    <div id="container1" class="panel-collapse collapse">
        <div class="panel-body">
            panel content
        </div>
    </div>
    </div>
</div>

我尝试使用 onclick 处理程序与 e.preventDefault（）; 阻止手风琴触发，但不起作用：

I tried using an onclick handler with e.preventDefault(); to stop the accordion from triggering, but it didn't work:

window.foo = function(e) {
    console.log("foo");
    $(".body").append("<br>foo");
    e.preventDefault();
}

JSFIDDLE

如何在单击按钮时阻止手风琴触发？

How can I prevent the accordion from triggering when the button is clicked?

推荐答案

您想要停止事件冒泡，因此您使用 stopPropagation ：

You want to stop event bubbling, so you use stopPropagation:

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

这篇关于单击标题中的按钮时如何防止手风琴切换？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！