本文介绍如何用原生javascript实现“单选式折叠面板”：点击一个选项时，自动收起其他已展开的内容区域，仅保留当前项展开，提升用户体验与界面一致性。
在构建常见 FAQ、手风琴（Accordion）或分步引导类 UI 时，常需确保同一时间仅有一个内容区块处于展开状态。原始代码中各事件监听器彼此独立，导致多个 .secenek-*-kismi 元素可能同时拥有 showing 类，无法满足“互斥展开”的需求。
核心思路是：每次点击前，先统一收起所有已展开的区块，再对目标区块执行切换逻辑。以下是优化后的完整实现（已去除重复逻辑，增强可维护性）：
<script>
// 封装共用逻辑：关闭所有 .showing 元素
function closeAllSections() {
document.querySelectorAll('.showing').forEach(el => el.classList.remove('showing'));
}
// 为每个选项绑定事件
document.querySelector('.secenek-1').addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector('.secenek-1-kismi');
if (target.classList.contains('showing')) {
target.classList.remove('showing');
} else {
closeAllSections();
target.classList.add('showing');
}
});
document.querySelector('.secenek-2').addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector('.secenek-2-kismi');
if (target.classList.contains('showing')) {
target.classList.remove('showing');
} else {
closeAllSections();
target.classList.add('showing');
}
});
document.querySelector('.secenek-3').addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector('.secenek-3-kismi');
if (target.classList.contains('showing')) {
target.classList.remove('showing');
} else {
closeAllSections();
target.classList.add('showing');
}
});
</script>✅ 关键改进点说明：
- 使用 closeAllSections() 函数抽象公共操作，避免三段重复的 querySelectorAll('.showing') 逻辑；
- 每次点击先判断目标是否已展开：若已展开则收起（支持“点击收起”），否则先清空其他、再展开目标；
- 严格调用 e.preventDefault()（注意原代码中漏掉了括号 e.preventDefault() → ❌ e.preventDefault 是无效的）；
- 所有选择器均基于类名，兼容现代浏览器，无需依赖 jQuery。
⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- 确保 HTML 中每个 .secenek-* 触发元素与其对应 .secenek-*-kismi 内容块一一匹配且存在；
- 若后续新增选项（如 .secenek-4），建议改用事件委托 + 数据属性方式（例如 data-target=".secenek-4-kismi"），进一步提升扩展性；
- CSS 中需定义 .showing 的显示样式（如 display: block; 或配合 max-height 实现过渡动画）。
通过以上结构化处理，即可稳定实现“点击即切换、展开即独占”的交互行为，兼顾功能性、可读性与可维护性。
