Question

好的，所以我正在尝试创建一个垂直滑动，我得到一个几乎按我想要的方式工作。这是一个非常简单的代码。但是有三个问题：

我需要在首次加载页面时关闭子菜单
如果您快速将鼠标悬停在链接上，子菜单将开始像疯了一样滑动。我需要它更流畅，并保持打开和关闭。它太敏感了
如果您将鼠标悬停在屏幕上的任意位置，则向下滑动链接即可滑动。只有当你将鼠标悬停在链接上时，我才需要它才能滑动

这是代码：谢谢！

<script type='text/javascript'>
$(document).ready(function(){
$("nav.main_menu li").hover(function(){
    $(this).children("ul").slideDown(500);   
},function(){
 $(this).children("ul").slideUp(300);      
});
});
</script>


<nav class="main_menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a>
<ul class="sub-menu">
<li><a href="#">Events</a></li>
<li><a href="#">Updates</a></li>
</ul>
</li>
<li><a href="#">People</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a>
<ul class="sub-menu">
<li><a href="#">2009</a></li>
<li><a href="#">2010</a></li>
<li><a href="#">2011</a></li>
<li><a href="#">2012</a></li>
<li><a href="#">2013</a></li>
<li><a href="#">2014</a></li>
<li><a href="#">2015</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
<li><a href="#">Bio</a></li>

                </ul>
            </nav>

Answer 1

要关闭子菜单，请在定义悬停位之前将其设置为display:none;或在$("li ul").hide();函数内执行.ready()。
这种悬停菜单的副作用很不幸。有一个名为HoverIntent的jQuery插件，我以前用它来帮助这个，但最后我最终没有做任何动画，因为它太巧妙了，不能很好地完成。
听起来li元素跨越页面的大部分而不是可见的。您可能想要检查它们的CSS并限制它们的高度或宽度。只要未设置overflow:hidden，子菜单仍应显示。

垂直滑动菜单栏

1 个答案: