本文介绍如何用原生 javascript 实现“单选式折叠面板”：点击一个标题时，自动收起其他已展开的面板，仅保留当前项展开，同时支持再次点击收起自身。
在构建常见 FAQ、手风琴（Accordion）或分段式内容区域时，一个核心交互需求是：每次只允许一个面板处于展开状态。上述原始代码虽能独立切换每个面板，但缺乏互斥逻辑——即点击 .secenek-2 时，不会主动关闭已打开的 .secenek-1-kismi，导致多个面板同时显示，违背用户体验预期。
要解决该问题，关键在于统一管理所有可展开区域的状态。每次点击触发时，先遍历并移除所有带有 showing 类的元素，再对目标面板执行添加或切换操作。以下是优化后的完整实现：
✅ 优势说明：
- 使用函数封装，大幅提升可维护性与可扩展性；新增第四个选项只需调用一次 setupToggle()；
- 严格区分“展开”与“收起”逻辑：仅当目标未展开时才清空全局状态，避免重复收起造成闪烁或性能浪费；
- 兼容性良好，基于原生 DOM API，无需依赖任何框架或库；
- 添加了 if (!trigger || !target) return; 安全检查，防止因 DOM 元素缺失导致脚本中断。
⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- 确保 CSS 中已正确定义 .showing 的显示规则（例如 display: block; 或配合 max-height 实现过渡动画）；
- 若需支持键盘访问（如 Enter/Space 键触发），建议为触发元素添加 tabindex="0" 并监听 keydown 事件；
- 在大型页面中，可考虑使用事件委托（event delegation）替代多个独立监听器，进一步提升性能。
通过这一模式，你不仅能精准控制面板的开闭行为，也为后续添加动画、异步加载或状态持久化打下坚实基础。
