保持打開子菜單後，從父母在jQuery中的鼠標移出

Question

我做了一個包含圖像和文本的水平菜單。
不過，我用這個代碼，以顯示和隱藏它的子菜單：

$('#top_menu').hover(function(e) { 
    $('#about_submenu').fadeIn('slow'); 
},function(){ 
    $('#about_submenu').fadeOut('slow'); 
}); 

一切工作正常，但每當我移動鼠標從父到子菜單，子菜單中消失，因爲fadeOut。當我從父鏈接位置移動光標時，如何保持子菜單出現？

Answer 1

試試這個：

$('#top_menu').hover(function(e) { 
    if(!$('#about_submenu').is(':visible')) 
    { 
     $('#about_submenu').fadeIn('slow'); 
    } 
},function(){ 
    if(!$('#about_submenu').is(':hover')) 
    { 
     $('#about_submenu').fadeOut('slow'); 
    } 
}); 

$('#about_submenu').mouseout(function(){ 
    if(!$('#top_menu').is(':hover')) 
    { 
     $('#about_submenu').fadeOut('slow'); 
    } 
}); 

Answer 2

用一個很小的超時（如200ms）執行淡出。如果您懸停子菜單項，則取消淡出。

這裏是你已經擁有的代碼方面的例子：

var timeoutID; 
$('#top_menu').hover(function(e) { 
    clearTimeout(timeoutID); 
    $('#about_submenu').fadeIn('slow'); 
},function(){ 
    timeoutID = setTimeout(hideSubmenu, 200); 
}); 

$('#about_submenu').hover(function(e) { 
    clearTimeout(timeoutID); 
},function(){ 
    timeoutID = setTimeout(hideSubmenu, 200); 
}); 

function hideMenu() { 
    $('#about_submenu').fadeOut('slow'); 
}