JavaScript多按钮CSS切换：FAQ项目点击箭头仅首个生效，实现任意箭头展开对应答案

• 重复ID违反HTML规范：你在所有箭头、所有答案元素上分别重复使用了down-arrow、answer作为ID值，而document.getElementById() 只会返回文档中第一个匹配该ID的元素，后续同ID的元素完全无法被脚本定位，这是只有第一个箭头能触发交互的直接原因。
• 绑定逻辑硬编码：原JS写死了只获取第一个箭头、第一个答案元素做操作，和其他FAQ条目没有任何关联关系，自然没法响应其他箭头的点击。
• 逐一定制ID的方案维护成本极高：如果后续要新增、删除FAQ条目，你需要手动给每个元素改ID、重新写绑定逻辑，条目多了之后很容易出现疏漏，不是最优实现路径。

核心思路：用类选择器批量匹配元素，利用DOM的父子关联定位当前点击箭头对应的答案，不需要给每个元素单独设置唯一ID。

修正后的HTML结构 #

去掉所有重复的ID，保留原有类名即可：

<article class="questions">
  How many team members can I invite?
  <img src="images/icon-arrow-down.svg" alt="arrow" class="arrow">
  <hr>
  <detail class="answer">
    You can invite up to 2 additional users on the Free plan. There is no limit on 
    team members for the Premium plan.
  </detail>
</article>  

<article class="questions">
  What is the maximum file upload size?
  <img src="images/icon-arrow-down.svg" alt="arrow" class="arrow">
  <hr>
  <detail class="answer">
    No more than 2GB. All files in your account must fit your allotted storage space.
  </detail>
</article>  

<article class="questions">
  How do I reset my password?
  <img src="images/icon-arrow-down.svg" alt="arrow" class="arrow">
  <hr>
  <detail class="answer">
    Click “Forgot password” from the login page or “Change password” from your profile page.
    A reset link will be emailed to you.
  </detail>
</article> 

<article class="questions">
  Can I cancel my subscription?
  <img src="images/icon-arrow-down.svg" alt="arrow" class="arrow">
  <hr>
  <detail class="answer">
    Yes! Send us a message and we’ll process your request no questions asked.
  </detail>
</article>

<article class="questions">
  Do you provide additional support?
  <img src="images/icon-arrow-down.svg" alt="arrow" class="arrow">
  <hr>
  <detail class="answer">
    Chat and email support is available 24/7. Phone lines are open during normal business hours.
  </detail>
</article>

优化后的CSS逻辑 #

把原来按ID选择的样式改成类选择器，将交互状态抽成独立类，不把样式值硬写在JS逻辑里，降低维护成本：

/* 默认隐藏所有答案 */
.answer {
  display: none; 
}
/* 答案展开状态 */
.answer.show {
  display: inline;
}
/* 箭头交互样式，加过渡让切换更顺滑 */
.arrow {
  transition: transform 0.2s ease;
}
.arrow.rotated {
  transform: scaleY(-1);
}

重写后的JS交互逻辑 #

批量给所有箭头绑定点击事件，通过当前点击的箭头元素，向上找到所属的.questions父容器，再定位容器内对应的箭头、答案元素做状态切换：

// 获取页面上所有箭头元素
const allArrows = document.querySelectorAll('.arrow');

allArrows.forEach(arrow => {
  arrow.addEventListener('click', function() {
    // 从当前点击的箭头元素，向上定位所属的FAQ条目容器
    const parentQuestion = this.closest('.questions');
    // 从当前条目容器内找到对应的答案元素
    const currentAnswer = parentQuestion.querySelector('.answer');
    
    // 切换答案的显示/隐藏状态
    currentAnswer.classList.toggle('show');
    // 切换箭头的旋转状态
    this.classList.toggle('rotated');
  })
})

该方案的扩展性极强：后续新增或删除FAQ条目时，只要保持统一的类名结构，不需要修改任何JS、CSS代码就能自动支持点击交互，完全不需要给每个元素单独设置唯一ID。

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