为什么事件处理程序仅能切换首个元素的类名，其余元素无响应？

问题根因 #

• document.querySelector() 仅返回页面内第一个匹配指定选择器的DOM元素，你原有代码仅绑定了第一个.accordion-icon图标的点击事件，且仅能控制第一个.item容器的类名切换，其余元素未做绑定自然不会生效。

修复实现 #

1. 替换原有JS逻辑 #

选中所有图标逐个绑定事件，点击时定位当前触发事件对应的父容器再做类名切换：

// 选中所有accordion图标元素
const faqDropDowns = document.querySelectorAll(".accordion-icon");

faqDropDowns.forEach(icon => {
  icon.addEventListener("click", function() {
    // 查找当前点击图标所属的item父容器
    const currentFaqContainer = this.closest(".item");
    currentFaqContainer.classList.toggle("open");
  });
});

2. 补充必要CSS样式 #

你原有CSS缺少隐藏内容的默认样式和打开后的显示规则，同时原有svg样式存在语法疏漏，补充修正后如下：

.item { margin-bottom: 10px; }
p { margin: 0; }
/* 修正原有width属性缺冒号的问题 */
svg { width: 1em; height: 1em; margin: 10px; }
/* 新增内容显隐控制样式 */
.item .hidden-box {
  display: none;
}
.item.open .hidden-box {
  display: block;
}

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