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

要求如下：当某人将鼠标悬停在主菜单上时，仅当鼠标远离主菜单或子菜单时，才显示子菜单5秒。

现在我已经增加了高达标高图像的高度，以便它不会被隐藏，直到您将鼠标移出该标题区域。

下面是该网站的链接：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(" &raquo; "); 
});

感谢提前:)

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

来源

2012-07-16 Sushil Raghav

你知道['setTimeout'（https://developer.mozilla.org/en/DOM/window.setTimeout）？ – 2012-07-16 07:38:19

你知道setTimeout（）; – mfadel 2012-07-16 07:38:40

试试这个：

$(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(" &raquo; "); 
});

setTimeout的功能将添加一个延迟毫秒指定数量。
这个关键字在setTimeout函数里面不起作用，所以我在变量链接中使用了对这个值的引用。

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

来源

2012-07-16 08:26:01

令人敬畏的工作Alok :)这是现在工作完美:) – 2012-07-16 09:39:29

这一个是更清晰 - if（timer）clearTimeout（timer）; 以前它创造了一点点问题，但现在它的100％完美按照我的要求:) – 2012-07-16 10:11:30

如果你想抽象的这种行为，而不是用定时器等处理，然后使用此：
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(" &raquo; "); 
});

我肯定会推荐的jQuery虽然hoverIntent插件，悬停意图很好的抽象，再加上没有手动定时器管理。

来源

2012-07-16 07:42:42

感谢您的快速回复您的逻辑是完美的，但我认为他们可能是一些问题的条件，它不工作完美，一旦我悬停菜单，并从该区域删除鼠标子菜单仍然存在，我认为隐藏的功能不完美，因为后悬停在所有的菜单上，所有的子菜单现在都可见。 – 2012-07-16 08:18:51

+1为hoverintent它的工作方式，人们发现自然 – 2012-07-16 08:52:45

嘿非常感谢:)你的Ans也帮助我很多它是真棒:) – 2012-07-16 14:24:09

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

回答

相关问题