如何为基于addEventListener的W3Schools手风琴添加展开/收起全部功能？

核心思路 #

通过全局标识区分单个点击与批量操作，在批量执行展开/收起时，临时禁用原有手风琴的切换逻辑，直接强制设置所有项的状态，避免已展开项被误关闭。

具体实现步骤 #

1. 新增全局状态标识 #

在原有JS代码开头添加变量，用于标记是否处于批量操作状态：

let isBatchOperation = false;

2. 编写展开/收起全部函数 #

// 展开所有手风琴项
function expandAll() {
  isBatchOperation = true;
  const accordionBtns = document.querySelectorAll(".accordion");
  const panels = document.querySelectorAll(".panel");

  accordionBtns.forEach(btn => btn.classList.add("active"));
  panels.forEach(panel => panel.style.display = "block");
  
  isBatchOperation = false;
}

// 收起所有手风琴项
function collapseAll() {
  isBatchOperation = true;
  const accordionBtns = document.querySelectorAll(".accordion");
  const panels = document.querySelectorAll(".panel");

  accordionBtns.forEach(btn => btn.classList.remove("active"));
  panels.forEach(panel => panel.style.display = "none");
  
  isBatchOperation = false;
}

3. 修改原有点击事件逻辑 #

在原有的手风琴点击事件中加入判断，批量操作时跳过切换逻辑：

document.querySelectorAll(".accordion").forEach(button => {
  button.addEventListener("click", function() {
    // 批量操作期间，不执行单个切换逻辑
    if (isBatchOperation) return;

    this.classList.toggle("active");
    const panel = this.nextElementSibling;
    panel.style.display = panel.style.display === "block" ? "none" : "block";
  });
});

4. 添加控制按钮 #

在HTML中手风琴组件的上方/下方添加操作按钮：

<button onclick="expandAll()">展开全部</button>
<button onclick="collapseAll()">收起全部</button>

关键说明 #

• 全局标识isBatchOperation会在批量操作前后自动重置，确保单个点击逻辑不受影响。
• 批量操作直接强制设置所有元素的类名与显示状态，无需依赖原有切换逻辑，保证状态统一。

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