本文介绍一种高效、可维护的 faq 折叠面板实现方式：通过 css 相邻兄弟选择器配合 javascript 事件委托，点击任一问题仅显示其紧邻的答案，同时自动收起其他已展开项。无需遍历 dom 节点，代码简洁且性能优异。
本文介绍一种高效、可维护的 faq 折叠面板实现方式：通过 css 相邻兄弟选择器配合 javascript 事件委托，点击任一问题仅显示其紧邻的答案，同时自动收起其他已展开项。无需遍历 dom 节点，代码简洁且性能优异。
在构建常见问答（FAQ）组件时，一个典型需求是：点击某个问题，仅展开其对应答案；再次点击则收起；且同一时间只允许一个答案处于展开状态。初学者常采用 querySelectorAll 遍历所有 .answer 元素并统一 toggle 类名，但这会导致所有答案同步显隐——违背“仅显示一个”的交互预期。
✅ 推荐方案：CSS 驱动 + 事件委托
本方案摒弃手动控制每个 .answer 的显示逻辑，转而利用 CSS 相邻兄弟选择器（+） 和 单一状态标识（.active），由样式规则自动决定哪个答案可见，JavaScript 仅负责状态切换。
? HTML 结构（保持语义清晰）
<div class="faq"> <div class="question">什么是 JavaScript？</div> <div class="answer">JavaScript 是一门运行在浏览器中的动态编程语言，用于实现网页交互逻辑。</div> </div> <div class="faq"> <div class="question">CSS 中的 box-sizing 有什么作用？</div> <div class="answer">它定义元素宽度和高度的计算方式，默认为 content-box，推荐设为 border-box 以简化布局。</div> </div> <div class="faq"> <div class="question">如何阻止事件冒泡？</div> <div class="answer">调用事件对象的 <code>evt.stopPropagation()</code> 方法即可。</div> </div>✅ 关键约束：每个 .answer 必须紧邻其对应的 .question（即作为下一个兄弟节点），这是 + 选择器生效的前提。
? CSS 样式（声明式控制显隐）
.question { cursor: pointer; font-weight: 600; padding: 0.75rem 1rem; background-color: #f8f9fa; border-radius: 4px; margin-bottom: 0.25rem; } /* 默认隐藏所有答案 */ .question + .answer { display: none; padding: 0.5rem 1rem; background-color: #fff; border-left: 3px solid #007bff; margin: 0 0 1rem 0; } /* 当前激活的问题 + 其相邻答案显示 */ .question.active + .answer { display: block; }⚙️ JavaScript 逻辑（轻量事件委托）
document.addEventListener('click', handle); function handle(evt) { // 精准捕获点击目标是否为 question 元素 if (evt.target.classList.contains('question')) { // 移除之前激活的问题（如有） const prevActive = document.querySelector('.question.active'); if (prevActive) prevActive.classList.remove('active'); // 激活当前问题 evt.target.classList.add('active'); } }? 为何使用事件委托？
直接监听 document 而非每个 .question，避免重复绑定；即使后续动态添加 FAQ 条目，逻辑依然生效，无需重新初始化。
⚠️ 注意事项与最佳实践
- DOM 结构必须严格匹配：.answer 必须是 .question 的直接后继兄弟元素（中间不能插入其他标签），否则 + 选择器失效；
- 避免滥用 toggle()：原代码中 answer.classList.toggle(“display”) 对所有答案批量操作，是问题根源；应聚焦于「状态管理」而非「元素操作」；
- 可扩展性增强：如需支持多选（非互斥展开），只需移除 prevActive 移除逻辑，并将 .active 改为 .expanded，CSS 改用 ~（通用兄弟选择器）；
- 无障碍优化建议：为 .question 添加 role=”button” 和 tabindex=”0″，并监听 Enter/Space 键触发，提升键盘可访问性。
✅ 总结
该方案以「CSS 控制表现，js 管理状态」为核心思想，用最少的 JavaScript 实现健壮的交互逻辑。相比遍历式写法，它更易维护、性能更高、结构更清晰，也更符合现代前端开发中关注点分离的设计原则。掌握相邻选择器与事件委托的组合应用，能显著提升你构建可复用 ui 组件的能力。
立即学习“前端免费学习笔记（深入）”；