Twitter Bootstrap：如何在2秒後自動隱藏下拉菜單？

Question

以此片段爲例，如何在鼠標光標離開下拉菜單區域後自動下拉隱藏？

Amazon.com就是一個很好的例子。如果將鼠標懸停在「按部門購物」上，然後移開光標，並在約0.5秒內將其恢復，則下拉菜單仍將可見。

引導片段：https://bootsnipp.com/snipps/user-preferences-in-nav-bar

我想我可以做一個setTimeout但隨後將其隱藏，即使我決定將我的光標回到下拉那些在2秒內。也許我可以清除mouseOver上的setTimeout以解決此問題？

在這種情況下，人們通常會做什麼？

Answer 1

另一個建議取消clearTimeout(x) ...

與函數處理懸停了，裏面有你的元素，和事件。所以你知道你什麼時候在mouseenter上，什麼時候在mouseleave上。 您可以使用功能屬性保存定時器，並在需要時清除它。

http://jsfiddle.net/blackjim/jw7Uz/3/

var handleHover = function(evObj){ 
    var $this = $(this); 

    if(!$this.hasClass('open')){ 
     return true; 
    } 

    if(evObj.type === 'mouseleave'){ 
     // on mouseleave... 
     handleHover.timer = setTimeout(function(){ 
      $this.removeClass('open'); 
     },2000); 

    } else if(evObj.type === 'mouseenter'){ 
     // on mouseenter... 
     if(handleHover.timer){ // find timer and clear it 
      clearTimeout(handleHover.timer); 
      delete handleHover.timer; 
     } 
    } 
}; 


$('#myDropDown').hover(handleHover); 

Answer 2

您需要在鼠標移開事件附加var x = setTimeout('hideme()',2000)和mousein回調