点击激活accordion手风琴时如何实现打开/关闭图标切换

问题根因 #

• CSS选择器错误：图标定义在.accordion::after伪元素上，但你写的.accordion[aria-expanded="true"]是给a标签本身加背景，没有命中伪元素，样式不会生效
• 状态触发条件不匹配：CSS绑定的是aria-expanded属性，但你的JS只切换了active类，没有修改aria-expanded属性，自然不会触发样式变更
• 缺少过渡属性，无法实现平滑切换效果

解决方案 #

方案1：复用现有active类（改动最小）

直接修改CSS，用你JS已经在切换的active类做状态判断，同时加过渡动画即可，不需要修改JS代码：

.accordion::after {
  content: " ";
  background: url("../image/icons/w-open.svg");   /* 未展开图标 */
  right: 0;
  display: block;
  background-repeat: no-repeat;
  height: 28px;
  width: 28px;
  margin: 10px auto;
  /* 添加平滑过渡效果 */
  transition: all 0.3s ease;
}
/* 命中active状态下的伪元素 */
.accordion.active::after {
  background: url("../image/icons/w-close.svg");   /* 展开图标 */
}

方案2：补充aria属性（符合可访问性规范）

如果要保留aria-expanded的语义化写法，先修改CSS选择器：

.accordion::after {
  content: " ";
  background: url("../image/icons/w-open.svg");   /* 未展开图标 */
  right: 0;
  display: block;
  background-repeat: no-repeat;
  height: 28px;
  width: 28px;
  margin: 10px auto;
  transition: all 0.3s ease;
}
.accordion[aria-expanded="true"]::after {
  background: url("../image/icons/w-close.svg");   /* 展开图标 */
}

再修改JS代码，同步切换aria-expanded属性：

var accordions = document.querySelectorAll("a.accordion");
// 初始化默认状态
accordions.forEach(item => item.setAttribute('aria-expanded', 'false'));

for (var i = 0; i < accordions.length; i++) {
  accordions[i].onclick = function() {
    const isActive = this.classList.toggle("active");
    // 同步修改aria属性
    this.setAttribute('aria-expanded', isActive ? 'true' : 'false');
    this.nextElementSibling.classList.toggle("show");
    hideAll(this);
  };
}

function hideAll(exceptThis) {
  for (var i = 0; i < accordions.length; i++) {
    if (accordions[i] !== exceptThis) {
      accordions[i].classList.remove("active");
      // 其他项重置aria属性
      accordions[i].setAttribute('aria-expanded', 'false');
      accordions[i].nextElementSibling.classList.remove("show");
    }
  }
}

两种方案都可实现图标平滑切换效果，根据你的实际需求选择即可。

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