单选按钮实现折叠菜单技巧

本文详解了如何用纯原生JavaScript将普通单选按钮组升级为专业级手风琴（Accordion）折叠组件，实现“点击一项展开、自动收起其余”的互斥效果；方案基于maxHeight平滑动画而非display切换，兼顾性能与视觉流畅性，通过预缓存元素、统一状态管理及严谨DOM结构校验，确保兼容性与可维护性，无需依赖第三方库即可快速集成到现有项目中。

本文介绍如何将多个可折叠按钮改造为互斥展开的“手风琴”（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 事件中执行，即可立即生效。

今天关于《单选按钮实现折叠菜单技巧》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！