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

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

1 个答案: