Bootstrap：使用面板标题折叠面板主体

Question

我有一个带有面板标题和面板主体的 Bootstrap v3 面板。我希望用户能够单击面板标题，它将折叠/展开面板主体。我正在使用 Bootstrap 的 Collapse javascript 来执行此操作。这是我的标记：

<div class="panel panel-default group-panel">
  <div class="panel-heading" role="button" data-toggle="collapse" data-target="#panel-body-foobar">
    <a href="#" class="btn btn-xs">Action Button</a>
  </div>
  <div class="panel-body collapse in" id="panel-body-foobar">
    Some content here. 
  </div>
</div>

此代码工作正常，单击面板标题将折叠/展开正文。但是，请注意我在面板标题内还有一个按钮。当我单击该按钮时，它正在折叠/展开面板主体。如果您不明白我的意思，请参阅此jsfiddle。

我如何配置它，以便仅直接单击面板标题而不是任何子元素将触发折叠/展开？

Answer 1

我相信解决方案是定义我自己的点击处理程序（而不是使用 Bootstrap 自动设置的那个），它会忽略对子项的点击：

$('.panel-heading[data-toggle^="collapse"]').click(function(){
    var target = $(this).attr('data-target');
    $(target).collapse('toggle');
}).children().click(function(e) {
  e.stopPropagation();
});

感谢 this answer 帮助我弄清楚如何让 jQuery 点击处理程序忽略对子项的点击。请注意，由于使用了e.stopPropagation();，这不会禁用子级本身的任何点击处理程序。