使用setTimeout关闭子菜单

Question

使用jQuery隐藏mouseleave上的子菜单，一切正常，但当我尝试使用setTimeout时，该功能无效。

这是我的代码没有setTimeout

$( "li.menu-item" ).hover(function() {  // mouse enter
  $( this ).find( ".sub-menu" ).show(); // display child
}, function(){ // mouse leave
  $( this ).find( ".sub-menu" ).hide(); 
});

使用setTimeout：

$( "li.menu-item" ).hover(function() {  // mouse enter
  $( this ).find( ".sub-menu" ).show(); // display child
}, function(){ // mouse leave
  setTimeout(function () {
    $( this ).find( ".sub-menu" ).hide();
  }, 2000);            
});

setTimeout功能正常，如果我在里面插入一个警告，则执行时间为 2秒延迟。

谢谢。

Answer 1

我认为$(this)无法在setTimeout()

内阅读的问题

$( "li.menu-item" ).hover(function() {  // mouse enter
  $( this ).find( ".sub-menu" ).show(); // display child
}, function(){ // mouse leave
  var ThisIt = $(this);    
  setTimeout(function () {
    ThisIt.find( ".sub-menu" ).hide();
  }, 2000);
});

Answer 2

在setTimeout中，这有不同的上下文，因此您无法定位“子菜单”。在setTimeout之前保留对此的引用，并使用它来引用setTimeout中的“子菜单”。