页面加载时 JQuery 悬停切换问题

Question

$("#menu-main li").hover(function(){
    $(this).find(".sub-menu").animate({
        height: "toggle",
        opacity: "toggle"
    }, "fast");
});

我正在使用它来切换悬停菜单。

我的问题是，如果页面加载时鼠标悬停在#main-menu li 上，则切换会向后切换，因为它会在鼠标离开时切换，而在再次悬停时关闭。

代码：

$(document).ready(function() {

    $("#menu-main li").hover(function(){
        $(this).find(".sub-menu").animate({
            height: "toggle",
            opacity: "toggle"
        }, "fast");
    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu-main">
  <li><a href="#">Home</a>
    <ul class="sub-menu" style="display: none;">
      <li><a href="#">News</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">News</a></li>	
      <li><a href="#">News</a></li>
    </ul>
  </li>
</ul>

我可以通过按“运行代码 sn-p”并快速将鼠标悬停在“主页”li 将加载的位置来重新创建。

Answer 1

我会完全避免使用 JavaScript（尤其是增加库的开销）来完成类似的事情，以避免首先出现此类问题。所以这是一个纯 CSS 的解决方案：

#menu-main .sub-menu {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 500ms cubic-bezier(0, 1, 0, 1), opacity 500ms;
}

#menu-main>li:hover .sub-menu {
  max-height: 100vh;
  opacity: 1;
  transition: max-height 1000ms ease-in-out, opacity 500ms;
}

Hover menu items to show submenus:
<ul id="menu-main">
  <li>Foo
    <ul class="sub-menu">
      <li>Lorem</li>
      <li>Ipsum</li>
      <li>Dolor</li>
    </ul>
  </li>
  <li>Bar
    <ul class="sub-menu">
      <li>Lorem</li>
      <li>Ipsum</li>
      <li>Dolor</li>
    </ul>
  </li>
  <li>Baz
    <ul class="sub-menu">
      <li>Lorem</li>
      <li>Ipsum</li>
      <li>Dolor</li>
    </ul>
  </li>
</ul>

动画延迟修复取自 this answer。