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

Posted 2023-05-08

【中文标题】使用悬停/淡入淡出折叠菜单

【英文标题】：Collapse menu with hover/fadeTo

【发布时间】：2012-10-20 05:54:05

【问题描述】：

这是我尝试过的：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);
);

【参考方案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）移出时实现这一点。