本文介绍如何通过事件委托与相邻兄弟选择器（+），精准控制单个 FAQ 问题的展开/收起，避免所有答案同时显示，兼顾语义性、性能与可维护性。
本文介绍如何通过事件委托与相邻兄弟选择器（`+`），精准控制单个 faq 问题的展开/收起，避免所有答案同时显示，兼顾语义性、性能与可维护性。
在构建常见问答（FAQ）组件时，一个典型需求是：点击某个问题，仅显示其紧邻的对应答案；再次点击则收起，且其他答案保持隐藏。原始代码中使用 querySelectorAll(".answer") 并对全部答案统一 toggle("display")，导致所有答案同步切换——这违背了“一对一响应”的交互逻辑。
✅ 推荐方案：CSS 驱动 + 事件委托
核心思路是将状态（展开/收起）绑定到 .question 元素上，再借助 CSS 的相邻兄弟选择器 .question.active + .answer 控制目标答案的显隐。这样无需操作 DOM 节点的 display 属性，也不需为每个问题单独绑定事件，既简洁又高效。
? HTML 结构（保持语义化）
<div class="faq"> <div class="question">什么是 JavaScript？</div> <div class="answer">JavaScript 是一门轻量级、解释型的编程语言，广泛用于 Web 前端交互开发。</div> </div> <div class="faq"> <div class="question">如何声明变量？</div> <div class="answer">可使用 <code>const</code>、<code>let</code> 或 <code>var</code> 关键字，推荐优先使用 <code>const</code> 和 <code>let</code>。</div> </div> <div class="faq"> <div class="question">事件委托是什么？</div> <div class="answer">事件委托利用事件冒泡机制，将事件监听器绑定在父容器上，由它统一处理子元素触发的事件，显著减少内存占用。</div> </div>
? CSS 样式（声明式控制显隐）
.question {
cursor: pointer;
font-weight: 600;
padding: 0.5rem 0;
transition: color 0.2s;
}
.question:hover {
color: #007bff;
}
/* 默认隐藏答案 */
.question + .answer {
display: none;
padding: 0.5rem 0 0.75rem 1rem;
color: #495057;
border-left: 2px solid #dee2e6;
}
/* 当前问题激活时，显示其后紧邻的答案 */
.question.active + .answer {
display: block;
color: #28a745;
border-left-color: #28a745;
}⚙️ JavaScript 逻辑（轻量、健壮）
// 使用事件委托，仅监听一次 document 点击
document.addEventListener('click', handleFAQClick);
function handleFAQClick(evt) {
// 检查点击目标是否为 .question 元素（含安全访问）
if (evt.target.classList?.contains('question')) {
// 移除已激活的问题状态（确保单选）
const activeQuestion = document.querySelector('.question.active');
if (activeQuestion) {
activeQuestion.classList.remove('active');
}
// 激活当前问题
evt.target.classList.add('active');
}
}⚠️ 注意事项与最佳实践
- 结构依赖严格：.answer 必须紧邻 .question（即同级、且顺序为 question → answer），否则 + 选择器不生效。若需更灵活布局，可改用 ~（通用兄弟选择器）或 JS 动态查找。
-
无障碍友好建议：为 .question 添加 role="button" 和 tabindex="0"，并监听 Enter/Space 键以支持键盘操作：
if (evt.target.classList.contains('question')) { if (evt.type === 'click' || evt.key === 'Enter' || evt.key === ' ') { evt.preventDefault(); // …… 状态切换逻辑 } } - 避免重复激活：当前实现支持「点击关闭」——再次点击已展开的问题会自动收起，符合用户直觉。
- 性能优势：相比为每个 .question 单独绑定事件，事件委托大幅减少监听器数量，尤其适用于动态增删 FAQ 条目的场景。
该方案将交互逻辑解耦为「状态管理（JS）」+「视觉表现（CSS）」，代码清晰、易于测试、便于主题定制，是构建现代 FAQ 组件的推荐范式。
