将延迟添加到水平下拉列表、垂直滑出-jQuery

当我快速悬停在项目上时，我需要阻止我的下拉项目“粘住”，因此我的想法是添加一个延迟，以防止子项目在您悬停一段时间之前悬停

我已经建立了一个标准的嵌套的未排序列表，使用CSS设置样式，并使用jQuery显示/隐藏，代码如下

除此之外，我还想在最后一级项目上添加一个隐藏延迟。由于第二个ul和最后一个ul之间的“连接”仅为10像素左右，因此您必须将鼠标移动到真正精确的位置才能使其工作，而不是完全隐藏导航

我如何A）为第二级ul增加显示延迟，以及B）为第三级ul增加隐藏延迟？我不是说速度，而是增加了物理延迟

这是我的密码：

$(function() {
    $('ul.sub-menu').hide();
    $('.sub-menu ul').hide();

    $('#menu-navigation li').hover(function(){
        $(this).children('ul').slideDown("fast");
        },
    function(){
        $(this).children('ul').hide();
    });

    $('#menu-navigation ul li').hover(function(){
        $(this).children('ul').slideDown("fast");
        },
    function(){
        $(this).children('ul').hide();
    }); 

});

---

设置超时并将其保存到变量，以便在需要时取消超时：

var second_lvl_timer;
$('#menu-navigation li').hover(function(){
    var $this_hover_in = $(this);
    second_lvl_timer = setTimeout(function () {
        $this_hover_in.children('ul').slideDown("fast");
    }, 500);
},
function(){
    var $this_hover_out = $(this);
    clearTimeout(second_lvl_timer);
    $this_hover_out.children('ul').hide();
});

当您将鼠标悬停在

#菜单导航li

元素上时，这将调用超时，如果在调用计时器之前将鼠标悬停，则该超时将被取消（在上述示例中为半秒）

对于第三个级别，您可以执行相同的操作，但可以向后执行：

var third_lvl_timer;
$('#menu-navigation ul li').hover(function(){
    var $this_hover_in = $(this);
    clearTimeout(third_level_timer);
    $this_hover_in.children('ul').slideDown("fast");
},
function(){
    var $this_hover_out = $(this);
    third_lvl_timer = setTimeout(function () {
        $this_hover_out.children('ul').hide();
    }, 500);
});

--更新--

---

我通过将setTimeout匿名函数中的

$（this）

语句更改为在悬停in/out时创建的变量来更新代码。这里有一个JSFIDLE:。我注意到，由于第二级悬停不需要超时，如果您悬停在整个列表之外，它会立即向上滑动并隐藏第三级信息。

对于第一个问题，您可以使用jquery delay方法暂停队列一段时间，但就我现在所知，即使您不再悬停，后续方法仍将运行，因此这并没有真正的帮助

对于第二个问题，我将再次尝试在hide调用之前向队列添加延迟方法

$('#menu-navigation li').hover(function(){         
    $(this).children('ul').slideDown("fast");         
    },    
    function(){         
    $(this).children('ul').delay(500).hide();     
});

---

谢谢你，贾斯珀！我已经尝试过实现它，我认为我做得很正确，但是现在它根本没有显示下降。这是我的新代码：