
本文介绍如何使用原生 javascript 构建“单选式折叠面板”:点击某个触发项时,仅展开对应内容区,同时自动关闭其他已展开的面板,确保始终最多只有一个面板处于打开状态。
在常见的 FAQ、设置菜单或手风琴(Accordion)组件中,我们往往希望实现“互斥展开”效果——即点击一个标题时,其对应内容展开,而其他所有已展开的内容则自动收起。原始代码中每个按钮独立控制自身关联内容,缺乏全局状态协调,因此无法满足该需求。
要实现这一行为,核心逻辑是:每次点击时,先统一关闭所有已添加 .showing 类的元素,再为目标内容添加 .showing(若尚未展开)。以下是优化后的完整实现:
✅ 优势说明:
- 可复用性强:封装为 toggleSection() 函数,避免重复逻辑;
- 健壮性提升:增加 if (!trigger || !content) 安全检查,防止 DOM 元素未加载导致报错;
- 体验优化:使用 classList.toggle() 替代手动判断 contains() + add/remove,语义更清晰;
- 性能合理:querySelectorAll('.showing') 仅遍历当前已展开节点,开销可控。
⚠️ 注意事项:
立即学习“Java免费学习笔记(深入)”;
- 确保 .showing 类在 CSS 中正确定义了可见样式(如 display: block 或 max-height 过渡);
- 若页面存在动态插入的同类结构,建议改用事件委托(document.addEventListener('click', ...) 配合 closest() 判断),以支持后续新增元素;
- 如需支持键盘访问(如 Enter/Space 键触发),可在事件监听中补充 keydown 处理逻辑。
通过以上方案,即可优雅实现“点击一个、收起其余”的交互效果,兼顾简洁性、可维护性与可访问性。










