延迟子菜单答案

【问题标题】：Delay a submenu延迟子菜单
【发布时间】：2012-04-28 12:40:12
【问题描述】：

我已经制作了一个脚本。在导航中打开我的子菜单。当您将鼠标移出子菜单时。子菜单必须延迟 300 毫秒关闭。但是延迟不起作用。我怎样才能解决这个问题？这是我的脚本：

$('.nav-main .container li').hover(function() {
    if ($(this).find('.submenu').length > 0) {
        $(this).addClass("hover");
        $(this).find('.submenu').show();
    }
}, function() {
    $(this).find('.submenu').delay(300).hide();
    $(this).removeClass("hover");
});

【问题讨论】：

hoverIntent.

标签： javascript jquery delay

【解决方案1】：

我还没有测试过以下代码，但它应该可以工作......

$('.nav-main .container li').hover(function() {
    if ($(this).find('.submenu').length > 0) {
        $(this).addClass("hover");
        $(this).find('.submenu').show();
    }
}, function() {
    var submenu = $(this).find('.submenu');
    setTimeout(function() {
      submenu.hide();
    }, 300);
    $(this).removeClass("hover");
});

【讨论】：

【解决方案2】：

您将需要创建一个 setTimeout() 方法，此外，您需要定义一个要在函数内部使用的对象 $(this) 将为 null。

$('.nav-main .container li').hover(function() {
    if ($(this).find('.submenu').length > 0) {
        $(this).addClass("hover");
        $(this).find('.submenu').show();
    }
}, function() {
    var object = $(this);
    setTimeout(function()
    {
        $(object).find('.submenu').hide();
        $(object).removeClass("hover");
    }, 300);
});

【讨论】：