基于JavaScript和jQuery的专业菜单（二）：子菜单箭头切换问题

首先确保你的菜单结构中，包含子菜单的<li>元素内有一个用于显示箭头的元素，示例结构如下：

<li class="menu-item-has-children">
  <a href="#">父菜单 <span class="arrow">→</span></a>
  <ul class="sub-menu">
    <!-- 子菜单选项 -->
  </ul>
</li>

接下来修改你的脚本部分，在平滑展开/收起子菜单的逻辑中，同步处理箭头切换：

document.addEventListener('DOMContentLoaded', function() {
  const parentMenuItems = document.querySelectorAll('.menu-item-has-children');
  
  parentMenuItems.forEach(item => {
    const menuTrigger = item.querySelector('a');
    const subMenu = item.querySelector('.sub-menu');
    const arrowElem = item.querySelector('.arrow');
    
    menuTrigger.addEventListener('click', function(e) {
      e.preventDefault(); // 按需阻止父菜单链接跳转
      
      // 平滑展开/收起子菜单
      subMenu.classList.toggle('active');
      if (subMenu.style.maxHeight) {
        subMenu.style.maxHeight = null;
      } else {
        subMenu.style.maxHeight = subMenu.scrollHeight + 'px';
      }
      
      // 切换箭头文本
      arrowElem.textContent = arrowElem.textContent === '→' ? '↓' : '→';
    });
  });
});

如果更倾向用CSS类控制箭头样式（更灵活，支持过渡动画），可以这样调整：

CSS 代码

.arrow {
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.3s ease;
}
.arrow.expanded {
  transform: rotate(90deg);
}

修改后的脚本

document.addEventListener('DOMContentLoaded', function() {
  const parentMenuItems = document.querySelectorAll('.menu-item-has-children');
  
  parentMenuItems.forEach(item => {
    const menuTrigger = item.querySelector('a');
    const subMenu = item.querySelector('.sub-menu');
    const arrowElem = item.querySelector('.arrow');
    
    menuTrigger.addEventListener('click', function(e) {
      e.preventDefault();
      
      // 平滑展开/收起子菜单
      subMenu.classList.toggle('active');
      if (subMenu.style.maxHeight) {
        subMenu.style.maxHeight = null;
      } else {
        subMenu.style.maxHeight = subMenu.scrollHeight + 'px';
      }
      
      // 切换箭头样式类
      arrowElem.classList.toggle('expanded');
    });
  });
});

如果你的箭头是通过CSS伪元素（如:after）实现的，只需给父级<li>添加切换类即可：

.menu-item-has-children > a:after {
  content: '→';
  margin-left: 8px;
}
.menu-item-has-children.expanded > a:after {
  content: '↓';
}

对应脚本中替换为：

item.classList.toggle('expanded');

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