WordPress移动端下拉菜单点击触发CSS伪元素箭头180°旋转方案问询

核心逻辑 #

CSS伪元素不属于真实DOM节点，无法直接通过JS选中操作，我们可以通过给父元素切换激活类名的方式，间接控制伪元素的样式状态，全程不需要修改原有HTML结构。

第一步：调整CSS代码

在原有CSS基础上新增/修改以下规则：

/* 给箭头伪元素添加过渡动画，保证旋转流畅 */
.mobile-menu .menu-item-has-children > a::after {
  transition: transform 0.3s ease; /* 新增这一行 */
}
/* 激活状态下箭头旋转180度 */
.mobile-menu .menu-item-has-children.active > a::after {
  transform: rotate(-90deg); /* 相对于初始的90度刚好旋转180度，可根据实际显示效果调整角度 */
}
/* 激活状态下显示子菜单，适配移动端点击交互 */
.mobile-menu .menu-item-has-children.active .sub-menu {
  opacity: 1;
  height: auto;
  visibility: visible;
}
.mobile-menu .menu-item-has-children.active .sub-menu li {
  height: auto;
  padding: 1rem 0;
}

第二步：添加JS点击触发逻辑

直接在站点全局JS文件或者自定义HTML嵌入块中加入以下代码即可：

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 选中所有移动端有子菜单的菜单项
  const menuItems = document.querySelectorAll('.mobile-menu .menu-item-has-children');
  menuItems.forEach(item => {
    const link = item.querySelector('a[aria-haspopup="true"]');
    link.addEventListener('click', function(e) {
      // 若父菜单本身是有效跳转链接可删除下一行
      e.preventDefault();
      // 切换当前菜单的激活状态
      item.classList.toggle('active');
      // 同步更新无障碍属性
      const expanded = link.getAttribute('aria-expanded') === 'true';
      link.setAttribute('aria-expanded', !expanded);
      // 可选功能：点击当前菜单时关闭其他已展开的子菜单
      menuItems.forEach(otherItem => {
        if (otherItem !== item) {
          otherItem.classList.remove('active');
          otherItem.querySelector('a[aria-haspopup="true"]').setAttribute('aria-expanded', 'false');
        }
      });
    });
  });
});

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