Bootstrap：在嵌套按鈕上取消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>