如何用Bootstrap实现全部Div折叠/展开并动态切换按钮文本

步骤1：调整HTML结构 #

给总控制按钮添加ID，同时给每个面板的折叠符号加统一类名，方便后续操作：

<div class="p-3 text-end">
  <a class="text-primary" id="toggleAll">Collapse All-</a>
</div>
<a data-bs-toggle="collapse" href="#q11">
  <div class="bg-light rounded position-relative mt-4">
    <div class="container-fluid p-4 overflow-hidden">
      <span class="d-inline-block fw-bold">1. What should I do ?</span>
      <span class="float-end fw-bold toggle-sign">+</span>
      <div class="collapse mt-3" id="q11">
        <p class="mb-0">
          Please help.
        </p>
      </div>
    </div>
  </div>
</a>
<a data-bs-toggle="collapse" href="#q12">
  <div class="bg-light rounded position-relative mt-4">
    <div class="container-fluid p-4 overflow-hidden">
      <span class="d-inline-block fw-bold">2. What should I do?</span>
      <span class="float-end fw-bold toggle-sign">+</span>
      <div class="collapse mt-3" id="q12">
        <p class="mb-0">
          please help
        </p>
      </div>
    </div>
  </div>
</a>

步骤2：编写JavaScript逻辑 #

利用Bootstrap的Collapse API实现批量控制，同时切换按钮文本和面板符号：

// 获取总控制按钮
const toggleAllBtn = document.getElementById('toggleAll');
// 获取所有折叠面板
const collapsePanels = document.querySelectorAll('.collapse');
// 获取所有面板的折叠符号
const toggleSigns = document.querySelectorAll('.toggle-sign');

toggleAllBtn.addEventListener('click', function() {
  // 判断当前操作类型：折叠还是展开
  const needCollapse = this.textContent.trim() === 'Collapse All-';

  // 遍历所有面板执行对应操作
  collapsePanels.forEach((panel, index) => {
    const collapseInstance = bootstrap.Collapse.getOrCreateInstance(panel);
    if (needCollapse) {
      collapseInstance.hide();
      toggleSigns[index].textContent = '+';
    } else {
      collapseInstance.show();
      toggleSigns[index].textContent = '-';
    }
  });

  // 切换总按钮文本
  this.textContent = needCollapse ? 'Expand All+' : 'Collapse All-';
});

关键说明 #

• 移除了总按钮原有的data-bs-toggle和无效的href，改用自定义点击事件控制逻辑
• 使用bootstrap.Collapse.getOrCreateInstance()确保能正确获取每个面板的折叠实例，避免重复初始化
• 同步每个面板的"+"/"-"符号，保证单个面板操作和全局操作的状态一致

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