JavaScript如何实现FAQ点击问题时自动隐藏其余已展开回答

你可以通过「点击时先隐藏所有回答，再处理当前点击项的展示状态」的逻辑实现需求，修改后代码如下：

const answers = document.querySelectorAll(".answer");
const questions = document.querySelectorAll(".question");

for (let i = 0; i < questions.length; i++) {
  questions[i].addEventListener("click", function () {
    // 统一隐藏所有回答
    answers.forEach(answer => answer.classList.add("hide"));
    // 切换当前对应回答的展示状态
    answers[i].classList.toggle("hide");
  });
}

逻辑说明 #

• 每次触发点击事件时，先遍历所有回答元素，统一添加hide类隐藏全部已展开的回答
• 再单独切换当前点击问题对应回答的类名：如果对应回答之前是隐藏状态，切换后会移除hide类完成展示；如果点击的是已经展开的问题，切换后会重新添加hide类完成收起，符合常规交互习惯

提示：请确保你的.hide类样式定义为display: none，且所有回答元素初始化时默认携带hide类即可正常运行。

内容的提问来源于stack exchange，提问作者Antonio Novak