引导:使用面板标题折叠面板主体

Question

我有一个带有面板标题和面板主体的引导带v3面板.我希望用户能够点击面板标题，它将折叠/展开面板主体。我正在使用Bootstrap的折叠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>

此代码工作正常，单击面板标题将折叠/展开主体。但是，请注意，在面板标题中也有一个按钮。当我单击该按钮时，它正在折叠/扩展面板主体。如果你不知道我的意思，请看这个小提琴。

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

Answer 1

我认为解决方案是定义我自己的单击处理程序(而不是使用自动设置的一个引导程序)，它忽略了对子节点的单击：

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

感谢这个答案帮助我弄清楚如何让jQuery单击处理程序忽略对孩子的单击。注意，由于使用了e.stopPropagation();，这并不会禁用对子程序本身的任何单击处理程序。