Bootstrap Accordion展开添加头部红色下边框、收起移除的实现问题

问题原因 #

• 选择器范围错误：代码中$('.panel .panel-collapse')、$('.panel .panel-heading')会选中页面中所有面板的对应元素，没有限定为当前点击的面板，导致操作会作用到全部面板上
• 状态类名错误：你使用的是Bootstrap 3.x版本，折叠面板展开的状态类为in，你代码中判断的show是更高版本Bootstrap的状态类，判断逻辑本身不生效
• 事件绑定不合理：直接绑定click事件会和Bootstrap自带的折叠动画时序冲突，可能出现状态判断延迟错误，推荐使用Bootstrap原生提供的折叠事件处理

修复方案 #

替换你原来的JS代码为以下内容即可：

// 监听Bootstrap折叠面板展开完成事件
$('#accordion').on('shown.bs.collapse', function (e) {
  // 给当前展开的面板头部加样式
  $(e.target).prev('.panel-heading').addClass('add-border-bottom');
});
// 监听Bootstrap折叠面板收起完成事件
$('#accordion').on('hidden.bs.collapse', function (e) {
  // 给当前收起的面板头部移除样式
  $(e.target).prev('.panel-heading').removeClass('add-border-bottom');
});
// 初始化默认展开的第一个面板样式
$('.panel-collapse.in').prev('.panel-heading').addClass('add-border-bottom');

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