如何在Bootstrap 4 Accordion折叠时为card-header添加active类？

没问题！Bootstrap 4的手风琴组件默认只会给触发折叠的<a>标签切换collapsed类，不会自动给card-header添加active类。不过我们可以利用Bootstrap折叠组件提供的事件来手动实现这个需求，步骤很简单：

1. 初始化与事件监听 #

首先，我们需要在页面加载完成后，给已经处于折叠状态的面板对应的card-header先加上active类，然后监听折叠面板的显示/隐藏事件，动态切换这个类：

$(document).ready(function() {
  // 初始化：给所有默认折叠的面板的card-header添加active类
  $('#accordion .collapse:not(.show)').closest('.card').find('.card-header').addClass('active');

  // 监听面板折叠完成事件：给对应card-header添加active类
  $('#accordion').on('hidden.bs.collapse', function(e) {
    $(e.target).closest('.card').find('.card-header').addClass('active');
  });

  // 监听面板展开完成事件：移除对应card-header的active类
  $('#accordion').on('shown.bs.collapse', function(e) {
    $(e.target).closest('.card').find('.card-header').removeClass('active');
  });
});

2. 添加自定义样式（可选） #

为了让active类有清晰的视觉反馈，你可以添加自定义CSS来区分状态：

.card-header.active {
  background-color: #e9ecef;
  color: #495057;
  /* 可以根据需求调整边框、字体大小等其他样式 */
}

逻辑说明 #

• Bootstrap的折叠事件hidden.bs.collapse会在面板完全折叠后触发，shown.bs.collapse会在面板完全展开后触发。我们通过e.target获取当前操作的折叠面板，再通过closest('.card')定位到对应的卡片容器，最后找到card-header完成类的切换。
• 初始化步骤是为了让页面加载时，默认折叠的面板的card-header就带有active类，保证初始状态与交互后的状态一致。

这样就能实现你想要的效果：当面板处于折叠状态时，card-header拥有active类；展开时则移除这个类。

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