如何在手风琴展开时将SVG图标旋转180度，收起时恢复初始状态

问题原因 #

• 你给.acc-icon设置了pointer-events: none属性，图标本身不会响应任何点击事件，你单独绑定在图标上的点击监听完全无法触发
• 图标旋转状态应该和面板的active状态绑定，而不是独立绑定点击事件，否则切换其他面板自动收起当前面板时，当前面板的图标无法自动恢复初始状态
• 原有代码中初始化时错误调用了showPanel(allPanelElements)，showPanel要求传入单个面板头部节点，传入节点数组会导致逻辑异常

解决方案 #

1. 先删掉你原来单独写的这段绑定图标点击事件的代码：

[...document.querySelectorAll('.acc-icon')].forEach(function(item) {
  item.addEventListener('click', function() {
    this.classList.toggle('down');
  })
})

2. 修改showPanel函数，在切换面板active状态的同时同步修改图标的类名，修改后的完整JS代码如下：

function initAccordion() {
  function handlePanelClick(event) {
    showPanel(event.currentTarget);
  }

  function showPanel(panelHeader) {
    let isActive,
      panel = panelHeader.parentNode,
      expandedPanel = document.querySelector(".panel.active");

    isActive = expandedPanel && panel.classList.contains("active") ? true : false;

    if (expandedPanel) {
      expandedPanel.querySelector(".acc-body").style.height = null;
      // 收起已展开面板时，移除对应图标的旋转类
      expandedPanel.querySelector('.acc-icon').classList.remove('down');
      expandedPanel.classList.remove("active");
    }

    if (panel && !isActive) {
      panel.classList.add("active");
      // 展开当前面板时，给对应图标添加旋转类
      panel.querySelector('.acc-icon').classList.add('down');
    }
  }

  let allPanelElements = document.querySelectorAll(".panel");

  for (let i = 0; i < allPanelElements.length; i++) {
    allPanelElements[i]
      .querySelector(".acc-trigger")
      .addEventListener("click", handlePanelClick);
  }
}

initAccordion(document.getElementsByClassName("accordion"));

你原有CSS中已经写好了旋转的过渡规则和样式，不需要额外修改CSS，调整完JS即可实现展开旋转180度、收起恢复初始状态的效果。

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