本文介绍一种高效、可维护的 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 组件的能力。
立即学习“前端免费学习笔记（深入）”；
