jquery下拉菜单粘贴答案

【问题标题】：jquery drop down menu stickingjquery下拉菜单粘贴
【发布时间】：2010-09-28 07:09:07
【问题描述】：

所以我正在使用 jquery 的 .hover 功能。但我遇到了一个小问题。当您将鼠标快速移到下拉菜单上时，下拉菜单不会被隐藏（ff3）。如果前一个功能没有完成，它似乎是在跳过鼠标退出功能，即 slideDown。无论如何要解决这个问题？

这里是测试站点：http://vasoshield.xcsit.com/index.html

javascript：

 $(document).ready(function() {
    $('#mainNav ul li').hover(  
        function() {
            $(this).find('ul').slideDown(500);
        },
        function () {
            $(this).find('ul').hide(0);
        }
    );      
 });

菜单 html

<div id="mainNav">
    <ul>
        <li class="requestInfoLink">
            <a href="#">Request Info</a>
            <ul>
                <li><a href="#">Ordering</a></li>
                <li class="last"><a href="#">Contact Us</a></li>
            </ul>
        </li>   

        <li class="newsLink">
            <a href="#">News</a>
            <ul>
                <li class="last"><a href="#">Press Release</a></li>
            </ul>
        </li>
        <li class="productLink">
            <a href="#">Product</a>
            <ul>
                <li><a href="#">Overview</a></li>
                <li><a href="#">Physician</a></li>
                <li class="last"><a href="#">Patient</a></li>
            </ul>
        </li>               

    </ul>
</div>

【问题讨论】：

查看此内容时没有发现任何问题。
没关系，我在 3.5 中看到了问题
必须将鼠标从导航的一侧快速移动到另一侧，并且它应该会粘住。
是的。我看见了。这是悬停的多种功能的问题。尝试不同的方法。也许尝试使用不同的事件处理程序，进行一些调试。

标签： jquery html css

【解决方案1】：

尝试将它们隐藏在 $(document) 中。准备开始。

如果没有，那为什么不试试 .slideToggle()

我敢肯定这是一件小而愚蠢的事情。只是尝试不同的东西。不过，我会先尝试 .slideToggle() 。或者只是 .toggle()

编辑： 我认为浏览器不喜欢悬停时的其他函数（）。

尝试制作一个向上滑动的模糊事件。应该会产生更平滑和更好看的结果。

【讨论】：

我不确定为什么将其隐藏在 $(document).ready 中会解决问题。这只会被调用一次，对吗？
是的，但同时。如果它一直被隐藏（使用 document.ready），那么当你没有将鼠标悬停在它上面时，它应该被隐藏。
使用 slideUp() 而不是 hide() 解决了问题
我现在正在查看该页面。您添加了一个 .hide() ，因此它正在工作。
.hide() 和 slideUp 工作。用于查看目的。也许让它褪色或 slideUp("slow") 它现在看起来真的很快。只是一个想法。就是这样的小事让我很生气。我也想像你。

【解决方案2】：

我实际上有一个更好的解决方案：

$(document).ready(function() {
$('#mainNav ul li').hover(  
    function() {
            $(this).find('ul').slideDown(500);
    },
    function () {
            $(this).find('ul').stop(false,true).hide(0);
    }
);

});

因此，在鼠标移出时，它会自动停止动画。 STOP 有两个参数，一个用于清除所有动画队列（不是必需的），第二个用于直接跳转到动画的末尾。在这种情况下，您想直接跳到动画的结尾并关闭它。这应该可以解决您的所有问题！

【讨论】：