折叠菜单与悬停/淡入淡出

Question

这就是我尝试过的：http://jsfiddle.net/MRMr4/2/

当然有问题。

正如您所看到的，当我将鼠标移动到下面显示的部分时，该部分将消失。如何更改我的jQuery，以便只有当鼠标退出 #menu 或 #products 时，此部分才会消失？

$('#menu').hover(function(){
    $('#products').fadeTo('fast', 1);
}, function(){
    $('#products').fadeTo('fast', 0);
});

$('#products').mouseover(function(){
    $('#products').show();
}).mouseout(function(){
    $('#products').fadeTo('fast', 0);
});

Answer 1

这种方法使用超时来延迟产品窗口的折叠。这样您就可以将鼠标从菜单移动到产品窗口而不会折叠到您的身上......！

$('#menu').mouseenter(function() {
    $('#products').fadeIn(100);

    var timeout = null;

    // Set timeout to delay collapse of product window
    $(this).mouseleave(function() {
        timeout = setTimeout(collapse, 300);
    });

    // Cancel the collapse event if product window is entered
    $('#products').mouseenter(function() {
        clearTimeout(timeout);
    }).mouseleave(function(){
        collapse();
    });
});

function collapse() {
    $('#products').fadeOut(100);
}

查看your updated fiddle。