保持打开子菜单后，从父母在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'); 
}