延迟子菜单

Question

我已经创建了一个脚本。这在导航中打开我的子菜单。当你将鼠标移出子菜单时。子菜单必须关闭，延迟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"); 
}); 

Answer 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"); 
}); 

Answer 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); 
});