JQuery的 - 下拉菜單 - 的mouseenter /鼠標離開

Question

我已經花了至少2個小時努力使這項工作..

基本上我有項的下拉菜單，我試着寫一些東西，模仿HoverIntent插件在菜單關閉之前，用戶被允許在固定的秒數內將鼠標移動到該項目之外。

我寫的是部分工作，只是如果您嘗試在菜單之間移動鼠標太快，它會「破壞」。如果你一定要慢慢做，一切都將如預期

看到它自己：

http://jsfiddle.net/DkJg8/1/

var old_item; 

$(".nav_menu > li").mouseenter(function(){ 

     var item_selected = $("ul", this); 
     // if this current item is already in process of being hidden 
     var timeout = item_selected.data("timeout_hide"); 
     if(timeout){ 
      clearTimeout(timeout); 
      item_selected.removeData("timeout_hide"); 

     } else { 

      if(old_item){ 
       old_item.hide(); 
      } 

      item_selected.show(); 
     } 
}); 

$(".nav_menu > li").mouseleave(function(){ 
     var item_selected = $("ul", this); 

     old_item = item_selected; 

     item_selected.data("timeout_hide", setTimeout(function(){ 
       item_selected.removeData("timeout_hide"); 
       item_selected.hide(); 
     }, 500)); 
}); 

我該如何解決？

Answer 1

這應做到：

var old_item; 
var timeout; 

$(".nav_menu > li").mouseenter(function(){ 
    var item_selected = $("ul", this); 
    clearTimeout(timeout); 
    if(old_item){ 
     old_item.hide(); 
    } 
    item_selected.show();  
}); 

$(".nav_menu > li").mouseleave(function(){ 
    var item_selected = $("ul", this);  
    old_item = item_selected; 
    timeout= window.setTimeout(function(){item_selected.hide()}, 500); 
});