如何用JavaScript循环实现FAQ多元素的展开收起切换？

问题根源 #

你当前的代码通过硬编码ID绑定单个FAQ元素，且使用全局变量buttonSwitch控制状态，导致无法复用逻辑到多个FAQ项，同时全局状态会引发多个FAQ状态冲突。

修复方案 #

通过类选择器批量获取所有FAQ容器，遍历绑定点击事件，并利用DOM元素的相对关系（而非硬编码ID）找到当前点击项对应的问题、按钮和答案，同时取消全局状态变量，改用元素自身的状态（比如按钮文本）来判断切换逻辑。

修改后的完整代码 #

JavaScript

// 获取所有FAQ容器
const questionContainers = document.querySelectorAll('.question-container');

// 遍历每个容器，绑定点击事件
questionContainers.forEach(container => {
  container.addEventListener('click', function() {
    // 通过当前容器找到对应的问题、按钮元素
    const question = this.querySelector('.question');
    const btn = this.querySelector('.btn');
    // 答案元素在容器的下一个兄弟的下一个兄弟（中间有hr分隔）
    const answer = this.nextElementSibling.nextElementSibling;

    // 切换答案和问题的样式
    answer.classList.toggle('toggle-style');
    question.classList.toggle('toggle-question-style');

    // 切换按钮文本状态
    btn.textContent = btn.textContent === '+' ? '-' : '+';
  });
});

CSS（保留原样式即可）

.FAQ-container {
  position: absolute;
  width: 60%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: solid 1px;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

h1 {
  margin: 0 auto;
  padding-bottom: 1rem;
  font-size: 20px;
  text-align: center;
}

.question-container {
  display: flex;
  justify-content: space-between;
  font-size: 1em;
  cursor: pointer;
}

hr {
  width: 100%;
}

.answer {
  font-size: .9em;
  margin: 0;
  margin-bottom: 2rem;
  display: none;
  transition: all 1s;
}

.toggle-style {
  display: block;
}

.toggle-question-style {
  font-size: .8em;
}

HTML（原结构无需修改）

<div class="FAQ-container">
  <h1>Frequently Asked Questions</h1>

  <div class="question-container" id="question-container-1">
    <div class="question" id="question-1">What is the return policy?</div>
    <div class="btn" id="btn-1">+</div>
  </div>
  <hr />
  <p class="answer" id="answer-1">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit.
  </p>

  <div class="question-container" id="question-container-2">
    <div class="question">When will I receive my order?</div>
    <div class="btn" id="btn-2">+</div>
  </div>
  <hr />
  <p class="answer" id="answer-2">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit.
  </p>

  <div class="question-container" id="question-container-3">
    <div class="question">Where are you located</div>
    <div class="btn" id="btn-3">+</div>
  </div>
  <hr />
</div>

关键改动说明 #

• 批量获取元素：用document.querySelectorAll('.question-container')替代单个ID选择器，一次性获取所有FAQ容器
• 独立事件绑定：通过forEach遍历每个容器，为每个容器绑定独立的点击事件，避免逻辑复用问题
• 相对DOM查找：在事件处理函数中用this（当前点击的容器）结合DOM方法查找对应元素，无需依赖硬编码ID
• 取消全局状态：通过按钮当前的文本内容判断切换状态，避免多个FAQ共用全局变量导致的状态冲突

内容的提问来源于stack exchange，提问作者Lixin Li