Bootstrap手风琴

Question

我正在使用transition.js插件为bootstrap制作手风琴。

现在我希望整个panel-heading触发元素的扩展和折叠，这就是我将a -tag移到其外部的原因。

到目前为止，这种方法很好但现在我在panel-heading上也有一个按钮，它不应该触发扩展。我怎么能做到这一点？

<div class="panel panel-default">
  <a class="accordion-toggle" data-toggle="collapse" data-parent="#gameslist" href="#collapse1">
    <div class="panel-heading row">
      <div class="col-xs-4">
        <div class="panel-title">Title</div>
      </div>
      <div class="col-xs-4">
        <button type="button" class="btn btn-danger btn-xs">This button should not trigger the accordion</button>
      </div>
    </div>
  </a>
</div>

Answer 1

您可以stopPropagation阻止点击事件发送到header元素。

$('.accordion-toggle button').click(function(e){
  e.preventDefault();
  e.stopPropagation();
});

我制作了一个演示here