hoverIntent seçme elemanında 'çıkış' işlevini tetikler

Question

Aşağıdaki kod, Mega Dropdown'ları göstermek ve gizlemek için kullanılır. Eğer 'dropDown' sınıfıyla bir bağlantıyı farz ederseniz, '.dropPanel' adlı çocuk gösterilir. Fareniz bağlantıyı veya bırakma panelini geçtiği sürece, bırakma paneli gösterilir. İmleci, ancak bağlantı veya panelin herhangi bir yerine taşıyın ve panel gizlenir. Oldukça basit şeyler.

Bu Mega Dropdown'lardan birkaçında seçim öğeleri içeren formlar vardır. Firefox'ta her şey yolunda. IE (8, özellikle, başka sürümleri test etmediniz), eğer açılan panelde bir seçim elemanını farenizin üzerine getirirseniz, hoverIntent, dropPanelOff() 'ın' out 'fonksiyonunu ve açılan panelin gizlenmesini engeller.

Bunu nasıl önleyebilirim?

 // Apply Hover Intent to Menu Panels 
     $(".dropDown").hoverIntent({ 
      sensitivity: 10, 
      interval: 150, 
      over: dropPanelOn, 
      timeout: 150, 
      out: dropPanelOff 
     }); 

      // Menu Over function call 
      function dropPanelOn() { 
       $('a[rel="dropLink"]', this).addClass('hover'); 
       $('.dropPanel', this).slideDown('fast'); 
      } 

      // Menu Out function call 
      function dropPanelOff() { 
       obj = this; 
       $('.dropPanel', this).slideUp(100, function(){ 
        $('a[rel="dropLink"]', obj).removeClass('hover'); 
        $('.dropLink span', obj).removeClass('hover'); 
       }); 
      } 

Answer 1

deneyin kodunuzu bu ekleme:

$(".dropDown select").mouseout(function(e) { 
     e.stopPropagation(); 
}); 

Answer 2

belki sadece yerli vurgulu olay kullanmalısınız, ayrıca buna bir gecikme ekleyebilirsiniz:

var time = false; 
$(".dropDown").hover(function() { 
    if ($("dropPanel", this).is(":hidden")) $("dropPanel", this).slideDown('fast'); 
    else window.clearTimeout(timer); 
}, function() { 
    var obj = $(this); 
    timer = window.setTimeout(function() {obj.slideUp(100);}, 150); 
});