javascript - 延迟子菜单

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) 将为空。

$('.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);
});