WordPress自定义菜单jQuery slideToggle页面刷新后效果反向问题

• 你调用hover()方法时仅传入了一个回调函数，该回调会在mouseenter、mouseleave两个事件触发时都执行，完全依赖slideToggle()自动识别元素当前显示状态做切换，状态极易出现错乱。
• 页面刷新时如果光标刚好停在带下拉的菜单项上：页面加载完成后会先执行.hide()将所有子菜单设为隐藏状态，但此时光标已经处于菜单项区域内，不会触发mouseenter事件。当你第一次将光标移出菜单项时，会触发mouseleave执行一次slideToggle()，把原本隐藏的子菜单展开，此时状态就和预期完全反转，后续移入触发隐藏、移出触发展开，就是你观察到的反向效果。
• 代码中重复调用.has('.sub-menu')做判断，属于冗余逻辑，也会额外增加DOM查询开销。

不要依赖slideToggle的状态判断，明确分开鼠标移入、移出事件对应的操作，移入强制展开，移出强制收起，从根源避免状态错乱问题，修复后代码如下：

jQuery(document).ready(function() {
  // 初始化隐藏所有子菜单
  jQuery(".has-mega-menu .sub-menu").hide();
  // 分别绑定移入、移出事件
  jQuery('.has-mega-menu').hover(
    function() {
      // 移入展开：stop的两个参数分别为清空动画队列、立即完成当前动画，避免快速切换时动画堆积
      jQuery(this).children('.sub-menu').stop(true, true).slideDown();
    },
    function() {
      // 移出收起
      jQuery(this).children('.sub-menu').stop(true, true).slideUp();
    }
  );
});

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