如何防止jquery動畫在選擇框處於活動狀態時觸發

以下jsfiddle演示了此問題。在Firefox中，將鼠標懸停在「突出顯示的故事」上並嘗試從第二個下拉列表中進行選擇：包含的ul動畫關閉，無法選擇選項。也可以通過從頂部的選擇框中選擇並稍微向下移動鼠標進入閃爍循環。如何防止jquery動畫在選擇框處於活動狀態時觸發

我可以做這樣的事情刪除MouseLeave事件：

$('.selector').click(function(){ 
     $('nav ul li').unbind('mouseleave'); 
});

但是這顯然阻止了懸停動畫無法正常點火。任何人都可以建議更優雅的解決方案

http://jsfiddle.net/codecowboy/mDUa9/8/

來源

2011-10-24 codecowboy

這裏是我的嘗試：http://jsfiddle.net/rPe9r/

$('nav ul li').hover(function() { // mouse enter 
    $('ul', this).slideDown(100); 
    }, function() { // mouseout 
     var container = $("ul", this); 
     // Hide popup if dropdown menu is not active 
     if (!container.hasClass("dropdown-active")) { 
      container.slideUp(100); 
     } 
    }); 

$("nav select").bind("focus", function() { 
    $(this).closest("ul").addClass("dropdown-active"); 
}).bind("change focusout", function() { 
    $(this).closest("ul").removeClass("dropdown-active"); 
});

代碼試圖確定何時選擇框激活和supresses容器slideUp上MouseLeave在任何的選擇框被激活。

我只在Firefox中測試過這一點，我懷疑這可能太簡單了，可能無法覆蓋所有用例（例如，當用戶從下拉列表中選擇一個不會觸發change事件的已選項目時）。可能需要進一步的測試/調整。

也許更強大的方法是動態地擴展容器的高度時，下拉框擴展使得鼠標不會離開容器，當用戶瀏覽的下拉菜單。當然，這裏的難點在於以便攜的方式確定選擇下拉菜單的大小。

一個可能的解決方法是使用可用的jQuery插件之一，用<div>代替<select>。這樣可以讓您在下拉菜單樣式中更加靈活，更重要的是，允許您調整您的CSS，以便在展開下拉菜單時自動縮放包含的div。

只是一個想法。

來源

2011-10-24 15:57:12

如何防止jquery動畫在選擇框處於活動狀態時觸發

回答

相關問題