javascript – 如何在jquery中延迟moverover部分hover()函数,并且只在光标在元素上执行某段给定的持续时间时执行

2023年1月24日 284次阅读 
<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毫秒)

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

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

点赞