本文介绍如何使用原生 javascript 构建“单选式折叠面板”：点击某个触发项时，仅展开对应内容区，同时自动关闭其他已展开的面板，确保始终最多只有一个面板处于打开状态。
在常见的 FAQ、设置菜单或手风琴（Accordion）组件中，我们往往希望实现“互斥展开”效果——即点击一个标题时，其对应内容展开，而其他所有已展开的内容则自动收起。原始代码中每个按钮独立控制自身关联内容，缺乏全局状态协调，因此无法满足该需求。
要实现这一行为，核心逻辑是：每次点击时，先统一关闭所有已添加 .showing 类的元素，再为目标内容添加 .showing（若尚未展开）。以下是优化后的完整实现：
<script>
// 统一处理函数：点击触发器时，收起所有、展开目标
function toggleSection(triggerSelector, contentSelector) {
const trigger = document.querySelector(triggerSelector);
const content = document.querySelector(contentSelector);
if (!trigger || !content) return;
trigger.addEventListener('click', function(e) {
e.preventDefault();
// 关闭所有已展开的内容（排除当前目标，避免闪烁）
document.querySelectorAll('.showing').forEach(el => {
if (el !== content) el.classList.remove('showing');
});
// 切换当前内容的显示状态
content.classList.toggle('showing');
});
}
// 为各组绑定事件
toggleSection('.secenek-1', '.secenek-1-kismi');
toggleSection('.secenek-2', '.secenek-2-kismi');
toggleSection('.secenek-3', '.secenek-3-kismi');
</script>✅ 优势说明：
- 可复用性强：封装为 toggleSection() 函数，避免重复逻辑；
- 健壮性提升：增加 if (!trigger || !content) 安全检查，防止 DOM 元素未加载导致报错；
- 体验优化：使用 classList.toggle() 替代手动判断 contains() + add/remove，语义更清晰；
- 性能合理：querySelectorAll('.showing') 仅遍历当前已展开节点，开销可控。
⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- 确保 .showing 类在 CSS 中正确定义了可见样式（如 display: block 或 max-height 过渡）；
- 若页面存在动态插入的同类结构，建议改用事件委托（document.addEventListener('click', ...) 配合 closest() 判断），以支持后续新增元素；
- 如需支持键盘访问（如 Enter/Space 键触发），可在事件监听中补充 keydown 处理逻辑。
通过以上方案，即可优雅实现“点击一个、收起其余”的交互效果，兼顾简洁性、可维护性与可访问性。
