如何让网页上的两个Bootstrap手风琴组件独立运行？

1. 修复图标切换与初始状态异常 #

问题出在图标切换逻辑未绑定单个手风琴的面板事件，且初始状态未正确检测面板展开状态。修改JS逻辑，针对每个手风琴独立处理：

document.addEventListener('DOMContentLoaded', function() {
  // 遍历所有手风琴容器
  document.querySelectorAll('.accordion').forEach(function(accordion) {
    // 初始化当前手风琴的图标状态
    accordion.querySelectorAll('.accordion-collapse').forEach(function(collapse) {
      const toggleBtn = collapse.previousElementSibling.querySelector('.accordion-button');
      if (collapse.classList.contains('show')) {
        toggleBtn.innerHTML = toggleBtn.innerHTML.replace('+', '-');
      } else {
        toggleBtn.innerHTML = toggleBtn.innerHTML.replace('-', '+');
      }
    });

    // 绑定当前手风琴的展开事件
    accordion.addEventListener('show.bs.collapse', function(e) {
      const toggleBtn = e.target.previousElementSibling.querySelector('.accordion-button');
      toggleBtn.innerHTML = toggleBtn.innerHTML.replace('+', '-');
    });

    // 绑定当前手风琴的折叠事件
    accordion.addEventListener('hide.bs.collapse', function(e) {
      const toggleBtn = e.target.previousElementSibling.querySelector('.accordion-button');
      toggleBtn.innerHTML = toggleBtn.innerHTML.replace('-', '+');
    });
  });
});

2. 解决全展开/折叠按钮联动问题 #

按钮事件未限定操作范围，导致影响所有手风琴。通过DOM层级关系定位当前按钮所属的手风琴容器，仅操作内部面板：

// 绑定全展开按钮事件
document.querySelectorAll('.expand-all-btn').forEach(function(btn) {
  btn.addEventListener('click', function() {
    const currentAccordion = this.closest('.accordion');
    currentAccordion.querySelectorAll('.accordion-collapse').forEach(function(collapse) {
      new bootstrap.Collapse(collapse, { toggle: false }).show();
    });
  });
});

// 绑定全折叠按钮事件
document.querySelectorAll('.collapse-all-btn').forEach(function(btn) {
  btn.addEventListener('click', function() {
    const currentAccordion = this.closest('.accordion');
    currentAccordion.querySelectorAll('.accordion-collapse').forEach(function(collapse) {
      new bootstrap.Collapse(collapse, { toggle: false }).hide();
    });
  });
});

3. 确认HTML结构正确性 #

确保每个手风琴的data-bs-parent指向自身ID，且所有面板ID唯一：

<!-- 第一个手风琴 -->
<div class="accordion" id="accordionOne">
  <button class="expand-all-btn">Expand All</button>
  <button class="collapse-all-btn">Collapse All</button>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        面板标题 +
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionOne">
      <div class="accordion-body">面板内容</div>
    </div>
  </div>
</div>

<!-- 第二个手风琴 -->
<div class="accordion" id="accordionTwo">
  <button class="expand-all-btn">Expand All</button>
  <button class="collapse-all-btn">Collapse All</button>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
        面板标题 +
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse show" data-bs-parent="#accordionTwo">
      <div class="accordion-body">面板内容</div>
    </div>
  </div>
</div>

关键注意点 #

• 每个手风琴的data-bs-parent必须对应自身容器ID，不可混用
• 所有面板ID必须唯一，避免冲突
• 按钮初始图标统一用+，JS会根据面板show类自动替换为-

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