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

How can we set time or delay of 5 seconds in dropdown sub menu?

本文关键字：5秒 设置 时间 延迟 菜单 我们      更新时间：2023-10-27

如何在下拉菜单中设置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/

如果您想抽象此行为而不处理计时器等，请使用以下方法：
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插件，它对悬停意图有很好的抽象，而且没有手动定时器管理。

试试这个：

$(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. 这个关键字在setTimeout函数中不起作用，所以我在变量链接中使用了对this值的引用

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

相关文章：