javascript - Bootstrap : Using panel heading to collapse panel body

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();，这不会禁用子级本身的任何点击处理程序。