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