使用悬停/淡入淡出折叠菜单

【问题标题】：Collapse menu with hover/fadeTo使用悬停/淡入淡出折叠菜单
【发布时间】：2012-10-20 05:54:05
【问题描述】：

当然有问题。

如您所见，当我将鼠标移动到正下方显示的部分时，该部分消失了。如何更改我的 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);
});

【问题讨论】：

标签： jquery menu hover

【解决方案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。

【讨论】：

好的，现在我也需要在鼠标从#menu （而不仅仅是#products）移出时实现这一点。