Funkcja hoverIntent wyzwala funkcję out na wybranym elemencie

Question

Poniższy kod służy do wyświetlania i ukrywania Mega Dropdowns. Jeśli przesuniesz kursor myszką na link z klasą "dropDown", pojawi się dziecko ".dropPanel". Dopóki mysz znajduje się nad linkiem lub panelem rozwijanym, panel rozwijany pozostaje wyświetlony. Przesuń kursor w dowolne miejsce, ale link lub panel, a panel jest ukryty. Dość podstawowe rzeczy.

W kilku z tych Mega Dropdowns istnieją formy, które zawierają wybierz elementy. W przeglądarce Firefox wszystko jest w porządku. W IE (8 w szczególności, nie testowałem żadnych innych wersji), po najechaniu myszą na wybrany element w panelu rozwijanym, hoverIntent uruchamia funkcję "out" dropPanelOff() i ukrywa panel.

Jak temu zapobiec?

 // 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

warto dodać to do Twojego kodu:

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

Answer 2

może należy po prostu użyć natywnej zdarzenia najechania, można dodać opóźnienie do niego także:

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); 
});