前端FAQ手风琴点击显示答案异常：仅首个元素生效的技术咨询

为什么只有第一个问题生效？ #

你用document.querySelector(".question-title")获取元素时，这个方法只会返回匹配选择器的第一个DOM元素，所以事件监听器只绑定在了第一个问题标题上，点击其他问题自然没反应；同理document.querySelector(".answer")也只选中了第一个答案元素，所以只有第一个答案会被切换显示状态。

为什么forEach报错？ #

querySelector返回的是单个DOM元素（不是数组或类数组集合），而forEach是数组/可迭代对象的方法，单个元素无法调用该方法，这就是你看到Uncaught TypeError的原因。要获取所有匹配的元素，得用document.querySelectorAll(".question-title")，它返回的是NodeList（类数组集合），现代浏览器中NodeList原生支持forEach方法。

正确实现代码 #

// 获取所有问题标题元素
const questionTitles = document.querySelectorAll(".question-title");

// 遍历每个标题，绑定点击事件
questionTitles.forEach(question => {
    question.addEventListener('click', () => {
        // 找到当前标题对应的答案元素（假设答案是标题的下一个兄弟元素）
        const correspondingAnswer = question.nextElementSibling;
        // 切换hide类
        correspondingAnswer.classList.toggle("hide");
    })
})

兼容性补充（可选） #

如果需要兼容不支持NodeList.forEach的旧浏览器（比如IE11及以下），可以把NodeList转成数组后再遍历：

// 转成数组的两种方式
Array.from(questionTitles).forEach(question => {
    // 同上的事件绑定逻辑
});

// 或者用扩展运算符
[...questionTitles].forEach(question => {
    // 同上的事件绑定逻辑
});

更健壮的元素匹配方式（可选） #

如果后续HTML结构可能变动（比如标题和答案之间插入其他元素），可以通过父元素定位答案，避免依赖兄弟元素的位置：
假设HTML结构如下：

<div class="faq-item">
    <div class="question-title">问题1</div>
    <p class="answer hide">答案1</p>
</div>
<div class="faq-item">
    <div class="question-title">问题2</div>
    <p class="answer hide">答案2</p>
</div>

可以这样获取对应答案：

question.addEventListener('click', () => {
    const correspondingAnswer = question.closest(".faq-item").querySelector(".answer");
    correspondingAnswer.classList.toggle("hide");
});

这种方式更灵活，不受兄弟元素顺序影响。

内容的提问来源于stack exchange，提问作者Tricia H.