Javascript JS/jQuery-尝试使用mouseenter（）mouseleave（）实现打开和关闭显示div，这样就不会得到重复的动画

这是我的代码：

   var timeouts = {};
    $('#nav ul > li').mouseenter(function() {
        clearTimeout(timeouts['menu']);
        $(this).find('div.dropdown').stop(true).slideDown(200);
    });
    $('#nav ul > li').mouseleave(function() {
        timeouts['menu'] = setTimeout(function() {
            $(this).find('div.dropdown').stop(true).slideUp(200);
        }, 1000)
    });

这似乎不起作用。有什么想法吗？

---

有没有其他方法可以实现我的目标？现在，当我将鼠标悬停在上方时，代码可以正常工作，但当我的鼠标离开时，div不会向上滑动。

在匿名函数中，

此

可能未定义为HTML元素

将此放在适当的范围内：

var timeouts = {'menu': false};

$('#nav ul > li').hover(function() {
    if (timeouts['menu'] !== false) {
      clearTimeout(timeouts['menu']);
    }

    $(this).find('div.dropdown').stop(true).slideDown(200);
}, function() {
    var $this = $(this);

    timeouts['menu'] = setTimeout(function() {
        $this.find('div.dropdown').stop(true).slideUp(200);
    }, 1000)
});

---

此外，如果您试图调用

timeouts['menu']

而没有首先定义它，则可能会出现错误。我会将它设置为默认值，然后在使用它之前检查它是否存在。

您可以尝试该插件，或者在此处查看一些解决方案：

您的列表是动态生成的吗？不，不是。如果我删除setTimeouts，代码可以正常工作。清除其中的代码，在mouseenter和mouseleave函数中发出一些警报，看看它是否工作