html - 引导手风琴

Question

我正在使用用于引导的 transition.js 插件来制作手风琴。

现在我希望整体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防止点击事件被发送到标题元素。

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

我在这里做了一个演示