本文介绍如何将多个可折叠按钮改造为互斥展开的“手风琴”（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";
}
});
});
✅ 关键改进说明：
- 使用 querySelectorAll 替代 getElementsByClassName（返回静态 NodeList，更可靠）；
- 预先缓存所有 .content 元素，避免每次重复查询 DOM；
- 点击时统一清空所有 maxHeight 并移除所有 .active 类，再单独激活当前项；
- 保留原生 CSS 过渡效果（transition: max-height 0.2s ease-out），动画自然流畅。
⚠️ 注意事项：
- 确保 HTML 中每个 .collapsible 按钮后紧跟且唯一对应一个 .content 元素（如您示例中 …的严格交替结构）。若 DOM 结构不规范（如插入其他元素），nextElementSibling 可能失效，此时建议为每组绑定 data-target 属性进行显式关联；
- 若需支持「点击已展开项则收起」（即允许完全收起），可改为切换逻辑（见下方进阶版）；
- 移动端需注意 :hover 与 :active 的兼容性，.active 类已足够作为视觉反馈依据。
? 进阶：支持“再次点击收起”
若希望点击已激活按钮时收起自身（即非强制单开，而是单开+可收起），可微调事件处理函数：
button.addEventListener("click", function() {
const isActive = this.classList.contains("active");
const targetContent = this.nextElementSibling;
// 先关闭全部
contents.forEach(c => c.style.maxHeight = null);
coll.forEach(b => b.classList.remove("active"));
// 再按需开启（仅当未激活）
if (!isActive && targetContent) {
this.classList.add("active");
targetContent.style.maxHeight = targetContent.scrollHeight + "px";
}
});
? 总结：
通过集中管理状态（统一关闭 → 选择性开启），即可轻松将普通折叠按钮升级为专业级 Accordion 组件。该方案不依赖第三方库、语义清晰、性能高效，且完美适配您现有的 CSS 动画与响应式布局。只需将上述脚本置于页面底部或 DOMContentLoaded 事件中执行，即可立即生效。
