实现点击Header及Header文本均可折叠的Collapse Panel方案

这个问题我之前做项目时也碰到过，核心原因是事件触发时的target元素指向不对：当你点击<span>里的文本时，event.target是这个<span>标签，而你原来的代码里用$(event.target).siblings('.panel-body')去找折叠内容——但<span>的兄弟元素里根本没有.panel-body，只有它的父元素.panel-heading才和.panel-body是兄弟关系，所以自然触发不了折叠。

下面给你两种简单的解决办法：

办法一：修改内联事件的选择逻辑（快速适配现有代码） #

直接在onclick里用closest()方法，找到点击元素最近的.panel-heading父元素，再去定位它的兄弟.panel-body：

<div class="panel panel-entity panel-default">
  <div class="panel-heading" onclick="{ $(event.target).closest('.panel-heading').siblings('.panel-body').slideToggle('slow'); }">
    <span class="panel-heading-text">@Model.RoleName</span>
  </div>
  <div class="panel-body">
    <div class="form-horizontal">
      <div class="entity">
        @*A bunch of form groups*@
      </div>
    </div>
  </div>
</div>

closest('.panel-heading')会从当前点击的元素（不管是span还是heading的空白处）向上查找，找到最近的.panel-heading元素，之后再找它的兄弟.panel-body就没问题了。

办法二：用jQuery事件绑定代替内联onclick（更规范的写法） #

内联事件在复杂项目里不好维护，推荐把事件绑定抽出来，利用事件冒泡的特性，不管点击.panel-heading里的哪个子元素，都会触发父元素的点击事件：

首先去掉HTML里的onclick属性：

<div class="panel panel-entity panel-default">
  <div class="panel-heading">
    <span class="panel-heading-text">@Model.RoleName</span>
  </div>
  <div class="panel-body">
    <div class="form-horizontal">
      <div class="entity">
        @*A bunch of form groups*@
      </div>
    </div>
  </div>
</div>

然后在你的JS脚本里添加事件绑定：

$(document).ready(function() {
  // 给所有.panel-heading绑定点击事件
  $('.panel-heading').on('click', function() {
    // 这里的this就是当前点击的.panel-heading元素
    $(this).siblings('.panel-body').slideToggle('slow');
  });
});

这种写法更清晰，也方便后续扩展（比如加折叠状态的图标切换等）。

内容的提问来源于stack exchange，提问作者Chase Koch