Jquery 下拉菜单鼠标输入延迟

Jquery Dropdown menu mouseenter delay

本文关键字：延迟 输入 鼠标 下拉菜单 Jquery      更新时间：2023-09-26

所以我有一个带有jquery的下拉菜单，它利用了向下和向上滑动功能。 

$(document).ready(function(){
    $('#menu>li').mouseenter(function(){
        $(this).find('ul>li').slideDown(250);
        $(this).find('ul>li').css('position', 'relative');
        $(this).find('ul>li').css('z-index', 9999);
    });
    $('#menu>li').mouseleave(function(){
        $(this).find('ul>li').slideUp(250);
        $(this).find('ul>li').css('position', 'relative');
        $(this).find('ul>li').css('z-index', 9999);
    });
});

如何使我的 mouseleave 函数执行后在 mouseenter 函数可以再次注册之前有延迟？

提前感谢！

声明一个初始超时为 0 的变量，一旦它进入mouseleave函数，就会将其更新为要延迟的值。

编辑
使用clearTimeout清除以前创建的超时。

$(document).ready(function(){
    var delay=0;
    var timeout;
    $('#menu>li').mouseenter(function(){
      timeout= setTimeout(function(){
        $(this).find('ul>li').slideDown(250);
        $(this).find('ul>li').css('position', 'relative');
        $(this).find('ul>li').css('z-index', 9999);
      },delay);
    });
    $('#menu>li').mouseleave(function(){
        if(typeof timeout!=='undefined'){
          clearTimeout(timeout);
        }
        delay=250;
        $(this).find('ul>li').slideUp(250);
        $(this).find('ul>li').css('position', 'relative');
        $(this).find('ul>li').css('z-index', 9999);
    });
});
相关文章：