javascript - JS/jQuery - 尝试使用 mouseenter() mouseleave() 实现打开和关闭显示 div，以免重复动画

Question

所以这是我的代码：

   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 不会向上滑动。

Answer 1

在您的匿名函数内部，this可能未定义为 HTML 元素。

放入this适当的范围：

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']。我将它设置为默认值，然后在使用它之前检查它是否存在。

Answer 2

你可以试试hoverIntent插件或者看看这里的一些解决方案：jQuery if mouse is over for 2 sec。开始动画或根本不动画