Question

当我将物品快速悬停在物品上时，我需要阻止我的下拉物品“粘住”，所以我的想法是增加延迟以防止子物品徘徊，直到你徘徊一段时间时间。

我有一个标准的嵌套无序列表设置，使用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();
    }); 

});

Answer 1

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

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();
});

当您将鼠标悬停在#menu-navigation li元素上时，这将调用超时，如果在调用计时器之前使用mouseout（在上例中为半秒），则会取消超时。

您可以为第三级做同样但倒退：

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);
});

- UPDATE -

我通过将setTimeout匿名函数中的$(this)语句更改为在hovering in / out中创建的变量来更新代码。这是一个jsfiddle：http://jsfiddle.net/hzPg4/。我注意到，由于第二级悬停不需要超时，如果您将鼠标悬停在整个列表中，则会立即向上滑动并隐藏第三级信息。

Answer 2

对于第一个问题，您可以使用jquery延迟方法暂停队列一段时间，但就我现在而言，即使您不再处于悬停状态，后续方法仍将继续运行，因此这不会对您有所帮助。 / p>

对于第二个问题，我再次尝试在隐藏调用之前将延迟方法添加到队列中。

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

添加延迟到水平下拉，垂直滑出 - jQuery

2 个答案: