Question

我正在尝试用子菜单做菜单。这就是我想要做的。

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

在这个5秒的间隔内，如果我将我的div（#submenu）悬停，我想要clearTimeout。所以这个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();
        }
    );
}

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

Answer 2

var timer是一个局部变量它不存在于该处理程序之外。

你需要把它变成一个全局变量。

Answer 3

我将如何做到这一点

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

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中编码不会太长。

jquery hover和setTimeout / clearTimeOut

4 个答案: