菜单交互开发需求：点击菜单项添加类与display:block属性，鼠标悬停/移出时切换子菜单动画类与显隐状态

嘿，我来帮你搞定这三个菜单交互需求！下面是具体的代码实现和说明，用原生JavaScript就能完成，不用依赖额外库：

首先先把你的HTML结构整理好，方便后续操作：

<li id="item-3" class="menu-item has-children-3"> 
  <a href="#" class="sf-with-ul"><span>Auto</span></a> 
  <ul class="sub-menu fadeOut animated fast" id="cpx" style=""> 
    <li id="menu-item-9" class="menu-item"><a href="#"><span>Reno яхту</span></a></li> 
    <li id="menu-item-6" class="menu-item"><a href="#"><span>Audi</span></a></li> 
  </ul> 
</li>

1. 点击菜单项的交互处理 #

这里假设你要给点击的菜单项添加的类名为active（如果不是可以自行替换），点击时同时设置display:block：

// 获取所有菜单项元素
const allMenuItems = document.querySelectorAll('.menu-item');

allMenuItems.forEach(item => {
  item.addEventListener('click', function(e) {
    // 阻止a标签默认跳转行为（如果是实际跳转链接可删除此行）
    e.preventDefault();
    
    // 给当前点击的菜单项添加指定类名
    this.classList.add('active');
    // 设置display:block
    this.style.display = 'block';

    // 如果点击的是带子菜单的父项，同步显示子菜单（可选，根据需求调整）
    if (this.classList.contains('has-children-3')) {
      const subMenu = this.querySelector('.sub-menu');
      subMenu.style.display = 'block';
      subMenu.classList.replace('fadeOut', 'fadeIn');
    }
  });
});

2. 鼠标悬停“Auto”菜单项的处理 #

当鼠标移到“Auto”父菜单项时，切换子菜单的动画类并显示：

const autoParentItem = document.getElementById('item-3');
const autoSubMenu = document.getElementById('cpx');

// 鼠标进入事件
autoParentItem.addEventListener('mouseenter', function() {
  // 替换fadeOut为fadeIn类
  autoSubMenu.classList.replace('fadeOut', 'fadeIn');
  // 设置子菜单显示
  autoSubMenu.style.display = 'block';
});

3. 鼠标移出“Auto”菜单项的处理 #

鼠标离开时隐藏子菜单并恢复动画类：

// 鼠标离开事件
autoParentItem.addEventListener('mouseleave', function() {
  // 隐藏子菜单
  autoSubMenu.style.display = 'none';
  // 恢复fadeOut类
  autoSubMenu.classList.replace('fadeIn', 'fadeOut');
});

补充说明 #

• 确保你已经正确引入了animated、fadeIn、fadeOut这些动画类的CSS样式（比如Animate.css的相关样式），否则动画效果不会生效；
• 如果你的指定类名不是active，记得把代码里的active替换成你需要的类名；
• 如果需要点击页面其他区域关闭子菜单，可以额外添加document的点击事件监听来处理。

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