本文介绍如何使用原生 javascript 实现“点击一个选项时，自动关闭其他已展开内容、仅保留当前项展开”的折叠面板（accordion）行为，避免多个面板同时打开，提升用户体验。
在构建常见 FAQ、设置菜单或侧边栏导航等交互组件时，常需实现「单开单闭」逻辑：即同一时间仅允许一个子内容区域（如 .secenek-1-kismi）处于 showing 状态；当用户点击另一个触发器（如 .secenek-2）时，应先收起所有已展开项，再展开目标项。
原始代码的问题在于：各事件监听器彼此独立，仅操作自身关联的 DOM 元素，未协调全局状态。因此，即使 .secenek-1-kismi 已展开，点击 .secenek-2 仍会直接展开 .secenek-2-kismi，导致多面板并存。
✅ 正确做法是：每次点击前，统一收起所有带 .showing 类的元素，再对目标内容执行切换（展开/收起）。以下是优化后的完整实现：
? 关键改进点说明：
立即学习“Java免费学习笔记（深入）”；
- ✅ 统一收起逻辑：使用 document.querySelectorAll('.showing') 获取全部展开项，一次性清除，确保互斥性；
- ✅ 可复用函数封装：toggleSection() 抽离核心逻辑，提高可维护性与扩展性；
- ✅ 保留点击收起能力：即使当前项已展开，再次点击仍可关闭，符合用户直觉；
- ✅ 严格调用 e.preventDefault()：修复原代码中漏掉括号（e.preventDefault → e.preventDefault()）的语法错误，防止默认跳转行为。
? 进阶建议：
- 若项目规模扩大，推荐改用 data-* 属性实现动态绑定（如
- 配合 CSS 过渡动画（如 transition: max-height .3s ease, opacity .2s）可显著增强视觉反馈；
- 注意确保 .showing 类在 CSS 中正确定义了可见样式（例如 display: block 或 max-height: 500px）。
通过以上结构化处理，即可稳定实现「点击即独显、多击即轮换」的专业级折叠交互体验。
