如何让页面加载时Accordion（手风琴组件）保持展开状态

1. 调整HTML结构 #

给每个Accordion的触发按钮添加active类，对应内容面板添加show类（以Bootstrap Accordion为例，其他框架/自定义组件可对应调整类名）：

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button active" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        标签1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        标签1内容
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button active" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
        标签2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        标签2内容
      </div>
    </div>
  </div>
</div>

2. 用JS确保初始化状态 #

如果依赖JS初始化组件，在页面加载完成后主动设置所有标签为展开激活状态，避免组件默认折叠逻辑覆盖：

document.addEventListener('DOMContentLoaded', function() {
  // 选中所有Accordion触发按钮
  const accordionBtns = document.querySelectorAll('.accordion-button');
  // 选中所有Accordion内容面板
  const accordionPanels = document.querySelectorAll('.accordion-collapse');

  accordionBtns.forEach(btn => {
    btn.classList.add('active');
    btn.setAttribute('aria-expanded', 'true');
  });

  accordionPanels.forEach(panel => {
    panel.classList.add('show');
  });
});

3. 避免组件失效的关键注意事项 #

• 不要重复调用Accordion的初始化方法，比如Bootstrap的new bootstrap.Accordion()只执行一次
• 检查是否有自定义CSS覆盖了组件默认样式，比如误将.accordion-collapse设置为display: none !important
• 如果需要所有标签独立展开（展开一个不影响其他），移除面板上的data-bs-parent属性

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