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');   
  });
});

在这种情况下，您也可以将悬停元素的索引保存在悬停元素之外。因为您似乎只是用它来查找索引。

jQuery addClass / Mouse-over timeout组合问题

1 个答案: