延遲子菜單

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