导航菜单含有子菜单时图标切换的处理

导航菜单含有子菜单时，通常可以使用图标切换来指示是否有子菜单以及展开或收起子菜单的状态。以下是处理这种情况的一般方法：

1. 选择适当的图标：首先，您需要选择适合表示有子菜单的图标，通常使用箭头向下或向右的图标来表示展开子菜单的状态。

2. 切换状态：当用户点击菜单项以展开或收起子菜单时，您需要在菜单项上切换图标。这可以通过JavaScript或其他前端技术来实现。例如，您可以使用CSS类来切换图标：

   
       
       
       
    
        
    菜单项 
         
    
          
   子菜单项1
    
          
   子菜单项2
    
         
    
    
       

   / 默认情况下，隐藏子菜单 /
   .submenu {
    display: none;
   }
   
   / 当有子菜单时，更改箭头图标 /
   .hassubmenu:before {
    content: "25B6"; / 箭头向右 /
   }
   
   .hassubmenu.active:before {
    content: "25BC"; / 箭头向下 /
   }

3. 添加交互行为：使用JavaScript为菜单项添加交互行为，以便在单击时切换菜单项的活动状态（active class）以及展开或收起子菜单。这可以通过事件监听器来实现。

   const submenuItems = document.querySelectorAll('.hassubmenu');
   
   submenuItems.forEach(item => {
    item.addEventListener('click', () => {
      item.classList.toggle('active');
      const submenu = item.querySelector('.submenu');
      submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block';
    });
   });

通过这些步骤，您可以实现具有子菜单的导航菜单，并在用户交互时切换图标以指示子菜单的展开和收起状态。您可以根据项目的具体需求进行进一步自定义和优化。