jQuery slideToggle 页面刷新的反向效果

Question

我使用 jQuery slideToggle 在 Wordpress 上制作了一个自定义菜单，以在悬停时切换下拉菜单。代码比较简单，一切正常。

但是我发现当我在两个具有下拉菜单的菜单项之间移动光标时刷新页面时，slideToggle 效果基本上会在其中一个上反转。当我将光标移到菜单上时会滑开，当我将光标从菜单上移开时会返回。

    jQuery(document).ready(function() {
      jQuery(".has-mega-menu").has('.sub-menu').children('.sub-menu').hide();
      jQuery('.has-mega-menu').hover(function() {
        jQuery(this).has('.sub-menu').children('.sub-menu').stop().slideToggle();
      });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="menu-item-28" class="has-mega-menu menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-28">
      <a href="shop-link">Shop</a>
      <ul class="sub-menu" style="height: 222px; padding-top: 0px; margin-top: 0px; padding-bottom: 0px; margin-bottom: 0px; display: none;">
        <li id="menu-item-42" class="mega-menu-column menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-42"><a href="#">TEST</a>
          <ul class="sub-menu">
            <li id="menu-item-41" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-41">
              <a href="#">Test Item 1</a>
            </li>
            <li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36">
              <a href="Shop-link">Test Item 2</a>
            </li>
          </ul>
        </li>
        <li id="menu-item-43" class="mega-menu-column menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-43">
          <a href="#">TEST 2</a>
          <ul class="sub-menu">
            <li id="menu-item-44" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-44">
              <a href="#">Test Item 1</a>
            </li>
            <li id="menu-item-45" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-45">
              <a href="#">Test Item 2</a>
            </li>
          </ul>
        </li>
        <li id="menu-item-46" class="mega-menu-column menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-46">
          <a href="#">TEST 3</a>
          <ul class="sub-menu">
            <li id="menu-item-47" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-47">
              <a href="#">Test Item 1</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>

Answer 1

好的，我不确定发生了什么。订单的某些东西弄乱了切换。但我修复它的方式是分别向下滑动和向上滑动。而且我还添加了 z-index，所以滑动的动画是恒定的。

jQuery(document).ready(function() {
    jQuery('.has-mega-menu > .sub-menu').hide();
    jQuery('.has-mega-menu').hover(function() {
        jQuery(this).has('.sub-menu').children('.sub-menu').stop().slideDown(250);
        jQuery(this).children('.sub-menu').css('z-index', '2')
    }, function() {
        jQuery(this).has('.sub-menu').children('.sub-menu').stop().slideUp(250);
        jQuery(this).children('.sub-menu').css('z-index', '1')
    });
});