本文介绍如何使用原生 javascript 实现单选式折叠面板：点击一个标题时，自动关闭其他已展开的内容区域，仅保留当前项展开，避免多个面板同时打开。
在构建常见 FAQ、手风琴（Accordion）或分段式内容区域时，一个核心交互需求是：每次只允许一个面板处于展开状态。默认的逐个绑定事件监听器方式（如原始代码）仅控制自身开关，无法协调多个面板之间的状态。要实现“点击 A 时关闭 B 和 C，再展开 A”的效果，关键在于统一管理所有可展开元素的状态。
以下是优化后的完整实现方案：
✅ 核心思路
- 点击任一触发元素（如 .secenek-1）时，先查找并移除所有已添加 showing 类的面板；
- 再对目标面板执行「若未展开则展开，否则收起」的逻辑；
- 同时修复原始代码中的两个常见疏漏：e.preventDefault() 缺少括号、变量命名冲突（如用 e 同时作为元素变量和事件参数）。
✅ 优化后代码（推荐写法）
⚠️ 注意事项
-
CSS 配合不可少：确保 .showing 类具备可见性控制，例如：
.secenek-1-kismi, .secenek-2-kismi, .secenek-3-kismi { display: none; } .secenek-1-kismi.showing, .secenek-2-kismi.showing, .secenek-3-kismi.showing { display: block; /* 或使用 max-height + transition 实现动画 */ } - 性能考虑：document.querySelectorAll('.showing') 在面板数量极多时可缓存为变量，但常规页面中无需过度优化；
- 可扩展性：本方案天然支持动态增删面板——只需向 triggers 数组追加配置即可，无需重复写监听器；
- 无障碍友好：建议为按钮添加 aria-expanded 属性，并同步更新其值（true/false），提升屏幕阅读器体验。
通过上述结构化处理，你将获得一个健壮、可维护且符合用户直觉的折叠面板系统——点击即聚焦，展开即独占，真正实现「所见即所得」的交互一致性。
