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>

我可以通过按“运行代码段”并快速悬停在“主页” 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。

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

1 个答案: