jQuery 下拉菜单问题

Posted 2023-05-08

【中文标题】jQuery 下拉菜单问题

【英文标题】：jQuery Dropdown Menu Question

【发布时间】：2011-04-13 18:27:02

【问题描述】：

我的下拉菜单有一些问题。代码在这里： http://jsfiddle.net/xY2p6/1/

我只是没有得到一些简单的东西，但是您可以看到它无法正常运行。我不知道如何将下拉菜单的隐藏与用户悬停在菜单链接之外的时间联系起来，而不是实际的下拉菜单。

有什么想法吗？

【参考方案1】：

由于您的菜单在同一个 <li> 内，您可以直接将悬停附加到它，如下所示：

$(function() 
    $(".dropdown").hover(function() 
        $(this).children("div.sub-menu").slideDown(200);
    , function() 
        $(this).children("div.sub-menu").slideUp(200);
    );
);​

You can give it a try here，或者更简单的.slideToggle()，像这样：

$(function() 
    $(".dropdown").hover(function() 
        $(this).children("div.sub-menu").slideToggle(200);
    );
);​

You can give it a try here.

【讨论】：

我会说“伟大的思想都一样”，但你的 84K 有点介意，呵呵 :)

谢谢，我知道解决方案很简单。我在第二个函数上添加了一个 .stop() 来摆脱这种重复的动画行为，这种行为在这些东西中很常见。

有趣。出于某种原因，slideToggle() 解决方案仅适用于 jsfiddle。当我将它放在页面上并将鼠标悬停在菜单链接上时，菜单会下降，但除非您将鼠标悬停然后再回到菜单链接上，否则它不会消失？

【参考方案2】：

你的 javascript 有点乱。

$(document).ready(function() 
    $(".dropdown").hover(
        function()
            $(this).children("div.sub-menu").slideDown(200);
        ,
        function()
            $(this).children("div.sub-menu").slideUp(200);
        
    );
);​

给你：http://jsfiddle.net/xY2p6/4/