Question

我在悬停触发的下拉列表上有一个显示/隐藏功能，我正在尝试调整它。我想要的是下拉列表出现在悬停状态，但是当鼠标离开之前等待大约500毫秒后，除非鼠标离开并悬停在另一个项目上（我没有'甚至还解决了第二个问题，因为我没有成功地遇到第一个问题。

这是迄今为止我所拥有的jsfiddle ... http://jsfiddle.net/u4e1tv21/12/

我已经做了一些挖掘，我尝试改变这一点js

$('[data-toggle="menu"]').on('mouseleave', function (ev) {
    var id = $(this).data('target');
    $('.sub-menu').hide();
    $(id).hide();
});

到这个

$('[data-toggle="menu"]').on('mouseleave', function (ev) {
    var id = $(this).data('target');
    setTimeout(function () {
        $('.sub-menu').hide();
        $(id).hide();
    }; 2000);
});

鉴于这一变化完全打破了这一事件，我知道我没有把它完全正确。但是，我似乎无法弄清楚这样做的正确方法。任何帮助都会非常感激。

Answer 1

使用delay(duration)

$('.sub-menu').delay(500).hide(0);
$(id).delay(500).hide(0);

更多信息：http://api.jquery.com/delay/

Answer 2

我相信您可能需要使用的是slideUp()和slideDown()效果

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

    $('[data-toggle="menu"]').on('mouseenter', function (ev) {
        var id = $(this).data('target');
        $('.sub-menu').slideUp();
        $(id).slideDown();
    });
    $('[data-toggle="menu"]').on('mouseleave', function (ev) {
        var id = $(this).data('target');
        $('.sub-menu').slideUp();
        $(id).slideUp();
    });
});

有了这个效果，您将有一个漂亮而又整洁的子菜单动画，不需要使用两个效果函数，如delay().hide() ，它们也可以但是还可以使用slideUp和在我看来，slideDown（）会缩短它。

这里更新的小提琴http://jsfiddle.net/u4e1tv21/20/

如何使用jquery延迟隐藏事件

2 个答案: