jQuery addClass/鼠标悬停超时组合问题

Question

在我添加鼠标悬停超时之前，下面的代码块可以完美运行。鼠标悬停超时有效，但不再添加类。有没有办法将两者结合起来，并且仍然按预期添加类？

$(document).ready(function(){
    var myTimeout;
$('#nav-bar > ul li').mouseenter(function() {
    myTimeout = setTimeout(function() {
    $('.drop-down-plates:visible').hide();  
    $('#nav-bar ul li.current-menu-item').removeClass('current-menu-item');
    $('#nav-bar ul li').eq($(this).index()).addClass('current-dmenu-item');
    $('.drop-down-plates').eq($(this).index()).slideDown();
    $('#nav-bar ul li.current-dmenu-item').removeClass('current-dmenu-item');
    }, 200);
}).mouseleave(function() {
    clearTimeout(myTimeout);
});


 $('#drop-down-box').mouseleave(function(){
    $('.drop-down-plates:visible').slideUp();   
    $('#nav-bar ul li.current-dmenu-item').removeClass('current-dmenu-item');   
});



});

Answer 1

在超时期间，this 将不是您悬停在其中的元素。您可以通过将上下文缓存在模板外部的变量中来解决此问题。

$(document).ready(function(){
  var myTimeout, 
  $('#nav-bar > ul li').mouseenter(function() {
     $this = $(this); // save reference to the element
     myTimeout = setTimeout(function() {
     $('.drop-down-plates:visible').hide();  
     $('#nav-bar ul li.current-menu-item').removeClass('current-menu-item');
     $('#nav-bar ul li').eq($this.index()).addClass('current-dmenu-item');
     $('.drop-down-plates').eq($this.index()).slideDown();
     $('#nav-bar ul li.current-dmenu-item').removeClass('current-dmenu-item');
     }, 200);
  }).mouseleave(function() {
     clearTimeout(myTimeout);
  });
  $('#drop-down-box').mouseleave(function(){
     $('.drop-down-plates:visible').slideUp();   
     $('#nav-bar ul li.current-dmenu-item').removeClass('current-dmenu-item');   
  });
});

---

在这种情况下，您也可以将悬停元素的索引保存在悬停元素之外。由于您似乎仅将其用于查找索引。