本文介绍如何使用原生 javascript 实现单选式折叠面板：点击一个标题时，自动关闭其他已展开的内容区域，仅保留当前项展开，避免多个面板同时打开。
在构建常见 FAQ、手风琴（Accordion）或分段式内容区域时，一个核心交互需求是：每次只允许一个面板处于展开状态。默认的逐个绑定事件监听器方式（如原始代码）仅控制自身开关，无法协调多个面板之间的状态。要实现“点击 A 时关闭 B 和 C，再展开 A”的效果，关键在于统一管理所有可展开元素的状态。
以下是优化后的完整实现方案：
✅ 核心思路
- 点击任一触发元素（如 .secenek-1）时，先查找并移除所有已添加 showing 类的面板；
- 再对目标面板执行「若未展开则展开，否则收起」的逻辑；
- 同时修复原始代码中的两个常见疏漏：e.preventDefault() 缺少括号、变量命名冲突（如用 e 同时作为元素变量和事件参数）。
✅ 优化后代码（推荐写法）
<script>
// 统一获取所有触发按钮与对应面板
const triggers = [
{ btn: '.secenek-1', panel: '.secenek-1-kismi' },
{ btn: '.secenek-2', panel: '.secenek-2-kismi' },
{ btn: '.secenek-3', panel: '.secenek-3-kismi' }
];
triggers.forEach(item => {
const btn = document.querySelector(item.btn);
const panel = document.querySelector(item.panel);
if (!btn || !panel) return; // 安全检查：防止元素不存在时报错
btn.addEventListener('click', function(e) {
e.preventDefault();
// 1. 关闭所有已展开的面板
document.querySelectorAll('.showing').forEach(el => {
el.classList.remove('showing');
});
// 2. 切换当前面板：若原本已展开，则收起；否则展开
if (panel.classList.contains('showing')) {
panel.classList.remove('showing');
} else {
panel.classList.add('showing');
}
});
});
</script>⚠️ 注意事项
-
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），提升屏幕阅读器体验。
通过上述结构化处理，你将获得一个健壮、可维护且符合用户直觉的折叠面板系统——点击即聚焦，展开即独占，真正实现「所见即所得」的交互一致性。
