引导程序：取消嵌套按钮上的data-toggle =“ collapse”

Question

我希望在单击面板标题时折叠面板折叠，而不是在单击面板标题中的按钮时折叠。

我的代码：

<div class="panel panel-default">
  <div class="panel-heading clearfix" data-toggle="collapse" href="#collapseBody">
    <h4 class="panel-title pull-left" style="padding-top: 7.5px;">Body</h4>
    <div class="btn-group pull-right">
      <!-- The problematic button -->
      <a href="#" class="btn btn-default">Button</a>
    </div>
  </div>
  <div class="panel-collapse collapse in" id="collapseBody">
    <div class="panel-body" id="body">
    </div>
  </div>
</div>

我试过的

我试图添加

<script>
    $('.btn').on('click', function (e) {
        e.stopPropagation();
    });
</script>

但是没有任何效果。

有人可以帮助初学者吗？ （：

Answer 1

adeneo在他的评论中给了金毛。

固定：

<script>
    $( document ).ready(function() {
        $('.btn').on('click', function (e) {
            e.stopPropagation();
        });
    });
</script>