如何实现点击选项时自动关闭其他展开项的JavaScript交互效果_网络技术

发布时间 - 2026-02-01 00:00:00 点击率：次

本文介绍如何用原生javascript实现“单选式折叠面板”：点击一个选项时，自动收起其他已展开的内容区域，仅保留当前项展开，提升用户体验与界面一致性。

在构建常见 FAQ、手风琴（Accordion）或分步引导类 UI 时，常需确保同一时间仅

有一个内容区块处于展开状态。原始代码中各事件监听器彼此独立，导致多个 .secenek-*-kismi 元素可能同时拥有 showing 类，无法满足“互斥展开”的需求。

核心思路是：每次点击前，先统一收起所有已展开的区块，再对目标区块执行切换逻辑。以下是优化后的完整实现（已去除重复逻辑，增强可维护性）：

✅ 关键改进点说明：

使用 closeAllSections() 函数抽象公共操作，避免三段重复的 querySelectorAll('.showing') 逻辑；
每次点击先判断目标是否已展开：若已展开则收起（支持“点击收起”），否则先清空其他、再展开目标；
严格调用 e.preventDefault()（注意原代码中漏掉了括号 e.preventDefault() → ❌ e.preventDefault 是无效的）；
所有选择器均基于类名，兼容现代浏览器，无需依赖 jQuery。

⚠️ 注意事项：

确保 HTML 中每个 .secenek-* 触发元素与其对应 .secenek-*-kismi 内容块一一匹配且存在；
若后续新增选项（如 .secenek-4），建议改用事件委托 + 数据属性方式（例如 data-target=".secenek-4-kismi"），进一步提升扩展性；
CSS 中需定义 .showing 的显示样式（如 display: block; 或配合 max-height 实现过渡动画）。

通过以上结构化处理，即可稳定实现“点击即切换、展开即独占”的交互行为，兼顾功能性、可读性与可维护性。