selectboxがアクティブなときにjqueryアニメーションが起動しないようにするには

Question

次のjsfiddleは問題を示しています。 Firefoxでは、 'ハイライトストーリー'の上にカーソルを置いて、2番目のドロップダウンから選択してください：包含するulアニメーションが閉じられ、オプションを選択することはできません。上の選択ボックスから選択し、マウスをわずかに下に動かすことによって、ちらつきのループに入ることも可能です。

私はこのような何かを行うことによってmouseleaveイベントを削除することができます

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

しかし、これは明らかに正しく発射からホバーアニメーションを防ぐことができます。誰かがよりエレガントなソリューションを提案できますか？

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

Answer 1

ここに私の試みです：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"); 
}); 

コードは、選択ボックスがアクティブで、選択ボックスのいずれかがアクティブなときmouseleaveにコンテナのslideUpをsupresses時に決定しようとします。

これはFirefoxでしかテストされていませんが、これはあまりにも単純すぎると思われます（たとえば、ユーザがchangeイベントをトリガーしないドロップダウンから既に選択されているアイテムを選択した場合など） 。さらにテスト/調整が必要になることがあります。

---

おそらく、より堅牢な方法は、ドロップダウンボックスは、ユーザーがドロップダウンメニューをナビゲートするときにマウスがコンテナを残さないように展開するときに動的にコンテナの高さをスケーリングすることであろう。もちろん、ここでの難しさは、ポータブルな方法で選択ドロップダウンメニューのサイズを決定することです。

可能な回避策は、<select>を<div>の代わりに使用できるjqueryプラグインの1つを使用することです。これにより、ドロップダウンメニューのスタイル設定に柔軟性がもたらされます。さらに、重要なことに、ドロップダウンメニューが展開されたときにdivを自動的に拡大/縮小するようにCSSを調整することができます。

単なる考えです。