本文介绍如何用原生
java
script实现“单选式折叠面板”：点击一个选项时，自动收起其他已展开的内容区域，仅保留当前项展开，提升用户体验与界面一致性。
在构建常见 FAQ、手风琴（Accordion）或分步引导类 UI 时，常需确保同一时间仅有一个内容区块处于展开状态。原始代码中各事件监听器彼此独立，导致多个 .secenek-*-kismi 元素可能同时拥有 sho
win
g 类，无法满足“互斥展开”的需求。
核心思路是：
每次点击前，先统一收起所有已展开的区块，再对目标区块执行切换逻辑
。以下是优化后的完整实现（已去除重复逻辑，增强可维护性）：
✅
关键改进点说明：
使用 closeAllSections() 函数抽象公共操作，避免三段重复的 querySelectorAll('.showing') 逻辑；
每次点击先判断目标是否已展开：若已展开则收起（支持“点击收起”），否则先清空其他、再展开目标；
严格调用 e.preventDefault()（注意原代码中漏掉了括号 e.preventDefault() → ❌ e.preventDefault 是无效的）；
所有选择器均基于类名，兼容现代
浏览器
，无需依赖 jQuery。
⚠️
注意事项：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
立即学习
“
Java免费学习笔记（深入）
”；
确保 HTML 中每个 .secenek-* 触发元素与其对应 .secenek-*-kismi 内容块一一匹配且存在；
若后续新增选项（如 .secenek-4），建议改用事件委托 + 数据属性方式（例如 data-target=".secenek-4-kismi"），进一步提升扩展性；
CSS 中需定义 .showing 的显示样式（如 display: block; 或配合 max-height 实现过渡动画）。
通过以上结构化处理，即可稳定实现“点击即切换、展开即独占”的交互行为，兼顾功能性、可读性与可维护性。