原生JS实现手风琴点击箭头旋转及querySelectorAll正确用法

你的问题核心是全局选择器导致操作了错误元素，且未处理箭头展开/收起的状态切换。下面直接给出修正后的代码和关键说明：

关键修正点 #

• 放弃全局查找箭头，改为基于当前点击的手风琴元素（accordion）定位内部箭头，避免影响其他元素
• 用classList.toggle('active')替代add，实现展开旋转、收起复原的切换效果
• 关闭其他手风琴时，同步移除对应箭头的active类，保持状态一致

修正后的完整代码 #

HTML（替换箭头为SVG图标，更贴合需求） #

<div>
  <details>
    <summary>    
      <h3>item1</h3> 
      <span><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M6 9l6 6 6-6"/>
      </svg></span>
    </summary>
    <p>desc1</p>
  </details>
  <details>
    <summary>
      <h3>item2</h3> 
      <span><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M6 9l6 6 6-6"/>
      </svg></span> 
    </summary> 
    <p>desc2</p>
  </details>
  <details>
    <summary> 
      <h3>item3</h3> 
      <span><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M6 9l6 6 6-6"/>
      </svg></span> 
    </summary>
    <p>desc3</p>
  </details>
</div>

CSS（保留原样式，新增过渡动画提升体验） #

summary{ 
  list-style: none;
  cursor: pointer;
}

details{
  padding: 1rem;
  background-color: lightblue;
  margin-bottom: 0.5rem;
 }

details summary{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

details:nth-child(even){
  background-color: lightgreen;
}

p{
  padding-top: 0.3rem;
  margin: 0.5rem 0 0;
}

.active{
  transform: rotate(180deg);
}

span{
  display: block;
  transition: transform 0.3s ease;
}

JavaScript（核心逻辑修正） #

document.querySelectorAll("details").forEach((accordion) => {
  accordion.addEventListener("click", () => {
    // 获取当前手风琴的箭头元素
    const currentArrow = accordion.querySelector('span');
    // 切换箭头旋转状态
    currentArrow.classList.toggle('active');

    // 遍历所有手风琴，关闭当前以外的面板并重置箭头
    document.querySelectorAll("details").forEach((item) => {
      if (accordion !== item) {
        item.removeAttribute("open");
        // 移除其他手风琴箭头的active类
        item.querySelector('span').classList.remove('active');
      }
    });
  });
});

效果说明 #

• 点击手风琴时，当前箭头自动切换旋转状态，其他面板箭头同步复原
• 新增的CSS过渡动画让旋转效果更流畅自然
• 精准定位当前元素的箭头，彻底解决全局选择器导致的错误操作问题

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