3

我目前正在尝试使用子菜单制作菜单。这是我想做的。

在悬停链接（#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();
        }
    );
}
4

4 回答 4

12

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();
        }
    );
}
于 2012-04-24T14:07:29.570 回答
5

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

您需要将其设为全局变量。

于 2012-04-24T14:03:20.110 回答
3

这是我会怎么做

var timer
$("#mylink").mouseenter(function(){clearTimeout(timer);$('#submenu').show()})
$("#mylink").mouseout(function(){timer = setTimeout(function(){$('#submenu').hide();}, 1000);})
于 2012-04-24T14:14:41.970 回答
1

如果你把#submenu 放在#mylink 里面，你就不需要#submenu 的第二个事件处理程序，你会得到这样的东西：

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

顺便说一句，你不需要 jQuery。用普通的 js 编写代码不会那么长。

于 2012-04-24T14:14:22.893 回答