2

我们如何在下拉菜单中设置 5 秒的时间或延迟。

要求是这样的：当有人将鼠标悬停在主菜单上时，只有当您的鼠标离开主菜单或子菜单时，它才会显示该子菜单 5 秒。

现在我已经将 ul 的高度增加到横幅图像的高度，这样它就不会被隐藏，直到您将鼠标移出该横幅区域。

以下是网站链接：http ://transitions.advisorproducts.com/home

这是一个参考站点链接： http: //focusyou.com/home（我的要求是这样的，但我不想复制这段代码，我想在自己的代码中实现）

下面是js：

$(function()
{
    $("ul.dropdown li").hover(function()
    {
        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');
    }, function()
    {
        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');
    });
    $("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");
});

提前致谢 ：）

你可以在这里测试：http: //jsfiddle.net/alokjain_lucky/KQAYT/2/

4

2 回答 2

4

如果您想抽象此行为而不处理计时器等，请使用：
http ://cherne.net/brian/resources/jquery.hoverIntent.html

否则只需使用计时器：

$(function()
{
    var hideTimer;
    $("ul.dropdown li").hover(function()
    {
        $(this).addClass("hover");
        $('ul', this).css('visibility', 'hidden'); //this should fix the error you mentioned!
        $('ul:first',this).css('visibility', 'visible');
    }, function()
    {
        if(hideTimer) {
            clearTimeout(hideTimer);
            hideTimer = setTimeout(function(){
                $(this).removeClass("hover");
                $('ul:first',this).css('visibility', 'hidden');
            }, 5000);
        }
    });
    $("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");
});

我肯定会推荐 jquery hoverIntent 插件，它对悬停意图进行了很好的抽象，而且没有手动计时器管理。

于 2012-07-16T07:42:42.203 回答
2

尝试这个：

$(function()
{
    var timer = 0;
    $("ul.dropdown > li").hover(function()
    {
        if (timer) clearTimeout(timer);
        $("ul.dropdown > li").removeClass("hover");
        $("ul.dropdown > li ul").css('visibility', 'hidden');
        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');
    }, function()
    {
        var link = $(this);
        timer = setTimeout(function(){
            $(link).removeClass("hover");
            $('ul:first',link).css('visibility', 'hidden');
        }, 5000);
    });
    $("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");
});
  1. setTimeout 函数将添加指定毫秒数的延迟。
  2. this 关键字在 setTimeout 函数中不起作用，因此我在变量链接中使用了对 this 值的引用。

这是代码的工作示例：http: //jsfiddle.net/alokjain_lucky/KQAYT/

于 2012-07-16T08:26:01.543 回答