jquery - 在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

用一个小的超时实现淡出，比如 200 毫秒。如果悬停子菜单项，请取消淡出。

下面是一个关于您已经拥有的代码的示例：

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