フォームの選択によるJqueryの問題隠しドロップダウン

Question

数量のフォーム選択オプションを含むドロップダウンメニューがあります。ドロップダウンはJqueryのホバーで動作します。したがって、メニューアイコンをホバーすると、ドロップダウンが表示され、オフにすると非表示になります。 selectオプションを変更しようとするたびに、残りの量が表示されます。しかし、私が別のオプションに移動したとき、または最初の選択オプションから離れたときには、ドロップダウンメニュー全体が隠れてしまいます。

$("#navigation #seven").live({ 
    mouseenter:function(){ 
     $(this).find('ul').show(); 
    }, 
    mouseleave:function() { 
     $(this).find('ul').hide(); 
    } 
}); 

Answer 1

私は、ホバーオフのタイムアウトを設定することをお勧めします。数百msと言いましょう。あなたのメニューでは、ホバーするとフラグをtrueに設定し、ホバーするとfalseに設定します。したがって、メニューアイコンのホバーオフがそのフラグを真と見なす場合、ドロップダウンメニューは隠されません。

例：

var overMenu = false; 
$(menuItem).hover(
    function() { 
     $(dropDownMenu).show(); 
    }, 
    function() { 
     setTimeout(function() { 
      if (!overMenu) 
       $(dropDownMenu).hide(); 
     }, 200); 
    } 
); 
$(dropDownMenu).hover(
    function() { overMenu = true; }, 
    function() { 
     overMenu = false; 
     $(this).hide(); 
    } 
}; 

Answer 2

あなたが選択するために取得しようとすると、メニューアイテムをmouseoutingているので、この問題が発生しました。

あなたは、コンテナでメニュー項目を選択を囲むdivの

​​

にホバーを適用し、その後、

$('#hoverable').hover(function(){ 
    $(this).find('select').show(); 
}, function(){ 
    $(this).find('select').hide(); 
}); 

Answer 3

がそれを手に入れたのdivにホバーを適用する必要があります！

var hover_off = false; 
var hover_count = 1000; 

$("#navigation #seven").live("mouseover",function(){ 
    hover_off = false; 
    $(this).find('ul').show(); 
}); 

$("#navigation #seven").live("mouseout",function(){ 
    hover_off = true; 
    setTimeout(myMouseOut, hover_count); 
}); 

function myMouseOut() { 
    if (hover_off) { 
     $("#navigation #seven").find('ul').hide(); 
    } 
}