Question

我制作了一个包含图像和文字的水平菜单但是，我使用此代码来显示和隐藏它的子菜单：

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

一切正常，但每当我将鼠标从父级移动到子菜单时，子菜单会因fadeOut而消失。当我从父链接位置移动光标时，如何保持子菜单出现？

Answer 1

使用小超时实现fadeout，例如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');
}

Answer 2

试试这个：

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

在jQuery中从parentout鼠标输出后保持打开的子菜单

2 个答案: