引導程序：取消嵌套按鈕上的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>