如何使用 Jquery Dropdown Menu 延迟隐藏菜单？答案

【问题标题】：How to delay hiding of a menu with Jquery Dropdown Menu?如何使用 Jquery Dropdown Menu 延迟隐藏菜单？
【发布时间】：2011-02-27 08:08:44
【问题描述】：

我有一个可以正常工作的下拉菜单，但我希望这样，如果我将鼠标悬停在菜单之外，它不会立即再次隐藏。所以基本上我想要一秒钟的延迟。

我已阅读有关 setTimeout 的信息，但不确定它是否是我需要的？

$('#mainnav a').bind('mouseover', function()
{
    $(this).parents('li').children('ul').show();
});

$('#mainnav a').bind('mouseout', function()
{
    $(this).parents('li').children('ul').hide();
});

【问题讨论】：

标签： jquery menu drop-down-menu delay settimeout

【解决方案1】：

指定“slow”作为显示和隐藏的参数。来自JQuery Docs。

$('#mainnav a').bind('mouseover', function()
{
    $(this).parents('li').children('ul').show("slow");
});

$('#mainnav a').bind('mouseout', function()
{
    $(this).parents('li').children('ul').hide("slow");
});

【讨论】：

不完全。慢慢地隐藏起来。它根本不等待隐藏。

【解决方案2】：

setTimeout 正是您所需要的。

$('#mainnav a').bind('mouseout', function()
{
    var menu = this;
    setTimeout(function()
    {
        $(menu).parents('li').children('ul').hide();
    }, 1000);
});

【讨论】：

下次显示菜单时，请确保关闭此计时器，以防止菜单突然打开/关闭
感谢小熊的回复，我试了一下，菜单就一直停留，不会消失。
@Keith 尝试设置：var menu = this;在setTimeout()之前，在超时函数里面把“this”改成“menu”
谢谢巴鲁。不幸的是，子菜单有点适合您的代码:)
啊，是的，很抱歉 this 已关闭。谢谢巴鲁。

【解决方案3】：

对于 mouseout，我会在 hide() 调用之前添加一个链式动画：

$('#mainnav a').bind('mouseout', function()
{
    $(this).parents('li').children('ul').animate({opacity:0.99}, 2000).hide();
});

这会延迟 2 秒。

【讨论】：