如何实现所有SVG图标点击后独立旋转，而非仅单个图标生效

问题原因 #

document.querySelector() 方法仅会匹配页面中第一个符合选择器规则的元素，因此你仅成功给第一个SVG图标绑定了点击事件，其余图标没有绑定交互逻辑，自然无法触发旋转效果。

修复方案 #

只需要修改你的JS代码，使用document.querySelectorAll()选中所有.rotate类元素，遍历后逐个绑定点击事件即可：

// 选中所有带rotate类的元素
const accordionChevrons = document.querySelectorAll('.rotate');
// 遍历每个元素，分别绑定点击事件
accordionChevrons.forEach(chevron => {
  chevron.addEventListener('click', function() {
    this.classList.toggle('down');
  })
})

你的原有CSS和HTML代码无需调整，修改JS后即可实现每个图标点击时独立触发旋转切换的效果。

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