jquery hover and setTimeout / clearTimeOut

Question

我目前正在尝试制作一个带子菜单的菜单。

这是我要做的事情。

鼠标悬停在链接(#mylink)上，我想在其正下方显示一个div（我们称之为“#submenu”）。当鼠标离开该链接时，在5秒后执行一个函数。

在这5秒的时间间隔内，如果我悬停在我的div(#submenu)上，我希望清除超时。

因此，这个div不会在5秒后消失。

以下是我的代码：

$(document).ready(function()
{
    $("#mylink").hover(
        function ()
        {
            $('#submenu').show();
        },
        function()
        {
            var timer = setTimeout(function(){$('#submenu').hide();}, 5000);
        }
    );

    $("#submenu").hover(
        function ()
        {
            clearTimeout(timer);
        },
        function()
        {
            $('#submenu').show();
        }
    );
}

- Franck HAMEL

Answer 1

SLaks的答案是正确的，但为了阐述一下，你需要将var timer放在函数处理程序外部。请注意，此示例并不会使timer成为全局变量 - 它只是扩大了其范围，以便所有处理程序都可以使用它。

$(document).ready(function(){
    var timer;
    $("#mylink").hover(
        function(){
            $('#submenu').show();
        }, function(){
            timer = setTimeout(function(){$('#submenu').hide();}, 5000);
        }
    );

    $("#submenu").hover(
        function(){
            clearTimeout(timer);
        }, function(){
            $('#submenu').show();
        }
    );
}

- Jeff

Answer 2

var timer 是一个本地变量。它只能在该处理程序中使用。

您需要将它改为全局变量。

- SLaks

Answer 3

这是我如何处理它的方法

var timer
$("#mylink").mouseenter(function(){clearTimeout(timer);$('#submenu').show()})
$("#mylink").mouseout(function(){timer = setTimeout(function(){$('#submenu').hide();}, 1000);})

- Paula Bean

Answer 4

如果您将 #submenu 放在 #mylink 内部，您就不需要为 #submenu 使用第二个事件处理程序，您会得到类似这样的结果：

var timer;
$(document).ready(function()
{
    $('#mylink').hover(function()
    {
        clearTimeout(timer);
        $('#submenu').show();
    },function()
    {
        timer = setTimeout(function(){$('#submenu').hide();},5000);
    });
}

顺便说一下，你不需要jQuery来完成这个。使用普通的js编码不会太长。

- David Diez