Twitter Bootstrap: как автоматически скрыть выпадающее меню через 2 секунды?

Question

Используя этот фрагмент в качестве примера, как я могу сделать dropdown hide автоматически после того, как указатель мыши покинул область выпадающего меню?

Amazon.com - отличный пример. Если вы нажмете над «Shop by Department», затем отодвиньте курсор и верните его в течение ~ 0,5 секунды, выпадающее меню все равно будет видно.

Bootstrap Отрывок: https://bootsnipp.com/snipps/user-preferences-in-nav-bar

Я предполагаю, что я мог бы сделать setTimeout, но тогда это будет скрывать его, даже после того, как я решил двигать курсор назад выпадающего меню в этих 2-х секунд. Может быть, я могу очистить setTimeout от mouseOver, чтобы преодолеть эту проблему?

Что люди обычно делают в этом случае?

Answer 1

другое предложение ...

Ручка парение с функцией, так и внутри вас есть элемент, и событие. Таким образом, вы знаете, когда находитесь на мышином центре и на мышином плече. Вы можете использовать свойства функции для сохранения таймера и очистить его, когда хотите.

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) на MouseOut события и отменить clearTimeout(x) на mousein обратного вызова