如何实现单选式可折叠按钮组（Accordion 效果）-js教程

本文介绍如何将多个可折叠按钮改造为互斥展开的“手风琴”（accordion 效果），即点击一个按钮时自动收起其他已展开项，仅保持当前项打开。

要实现「一次只展开一个」的折叠面板（即 Accordion 行为），关键在于：每次点击时，先关闭所有已展开的内容，再展开目标内容。您原始代码中使用 maxHeight 控制展开/收起，这是合理且平滑的方案（优于简单的 display: none/block），因此我们将在其基础上增强逻辑，而非改用 display。

以下是优化后的 JavaScript 实现（兼容您的现有 HTML/CSS 结构）：

const coll = document.querySelectorAll(".collapsible");
const contents = document.querySelectorAll(".content");

// 初始化：确保仅第一个默认展开（可选）
// coll[0].classList.add("active");
// contents[0].style.maxHeight = contents[0].scrollHeight + "px";

coll.forEach(button => {
  button.addEventListener("click", function() {
    // 1. 关闭所有已展开项
    contents.forEach(content => {
      content.style.maxHeight = null;
    });
    coll.forEach(btn => btn.classList.remove("active"));

    // 2. 展开当前点击项（仅当它尚未激活）
    const targetContent = this.nextElementSibling;
    if (targetContent && targetContent.classList.contains("content")) {
      this.classList.add("active");
      targetContent.style.maxHeight = targetContent.scrollHeight + "px";
    }
  });
});

✅ 关键改进说明：