Bootstrap手風琴

Question

我正在使用transition.js插件進行引導以制作手風琴。

現在，我希望整個panel-heading觸發該元素的展開和折疊，這就是為什么我將-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以防止將click事件發送到header元素。

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

我在這里做了一個演示