javascript - 如何在jquery中延迟hover（）函数的鼠标悬停部分，并且仅在光标在元素上一段时间后执行

Question

<ul id="menu">
<li>What's new?
    <ul class="active">
        <li><a href="#">Weekly specials</a></li>
        <li><a href="#">Last night's pics!</a></li>
        <li><a href="#">Users' comments</a></li>
    </ul>
</li>
<li>Member extras
    <ul>
        <li><a href="#">Premium Celebrities</a></li>
        <li><a href="#">24-hour Surveillance</a></li>
    </ul>
</li>
<li>About Us
    <ul>
        <li><a href="#">Privacy Statement</a></li>
        <li><a href="#">Terms and Conditions</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</li>
</ul>

jQuery代码：

 <script>
    $(document).ready(function(){

        $('#menu>li>ul>li').hide();

        $('#menu>li').click(function(e){e.stopPropagation();});



        $('#menu>li').hover(

                function(){

                    t=$(this);

                    $(t).find('ul>li').slideToggle();
                },

                function(){

                    $(t).find('ul>li').slideToggle();
                }
        );

    });

</script>

我想制作一个带有子列表的垂直菜单列表，当鼠标悬停在它上面时它会展开，当鼠标离开时它会折叠。上面提到的代码运行良好，但唯一的事情是在列表中从下到上移动光标时，每个项目直到我到达列表顶部展开和折叠。我应该包括什么来避免这种行为，以便列表项只会展开当光标停留在它上面一段时间（比如 500 毫秒）

Answer 1

您将需要一个 setTimeout：

$('#menu>li').hover(
    function(){
        var t = $(this);

        setTimeout(function(){
            if(t.is(":hover")) // Don't fire the event if #menu>li is not hovered
                t.find('ul>li').slideToggle();
        }, 500);
    },
    function(){
        $(this).find('ul>li').slideToggle();
    }
);

Answer 2

添加此作为答案，因为它似乎解决了您的问题：

有一个邪恶的图书馆叫做Hover Intent来做这件事。.hover()它以可配置的延迟覆盖标准方法。

Answer 3

演示

试试这个

$(document).ready(function () {

    $('#menu>li>ul>li').hide();

    $('#menu>li').click(function (e) {
        e.stopPropagation();
    });



    $('#menu>li').hover(

    function (event) {
        event.preventDefault();
        $(this).find('ul>li').stop().slideDown();
    },

    function (event) {
        event.preventDefault();
        $(this).find('ul>li').stop().slideUp();
    });

});

希望这有帮助，谢谢