すべてのドロップダウンを一度に開くドロップダウンメニュー

Question

ナビゲーションドロップダウンメニューがあり、1つのアイテムにカーソルを合わせるとドロップダウンが表示されますか？私はそれが少し忙しいかもしれないことを知っていますが、このプロジェクトではこれは不可欠です。それが動作する限り、jQuery、CSSまたは何でも使用できます。

Answer 1

すべてのメニューにクラスを与えると、それらをjQueryですべて選択することができます。彼らはすべてが表示されていると仮定します。他のshow/hide属性も同じように動作します。唯一の問題は、マウスを離れたところから移動するときです。

$("#specialDropDown").live('mouseover',function(){ 
      $('.dropDown').css('display', 'block'); 
}); 

$(".drowDown").live('mouseout', function(){ 
      $('.dropDown').css('display','none'); 
}); 

唯一の問題は、離れた場所からマウスを離した場合です。それを解決するには、それらをすべて表示するボタンがあることをお勧めします。

$("#specialDropDown").live('click', function(){ 
     if($(this).hasClass('activeButton') 
      { 
       $(this).removeClass('activeButton');  
       $('.dropDown').css('display', 'none'); 
      } 
     else 
      { 
       $(this).addClass('activeButton');  
       $('.dropDown').css('display', 'block'); 
      } 

}); 

Answer 2

JavaScriptは必要ありません。

HTML：

<ul id='dropdowns'> 
    <li>First menu 
     <ul>...</ul> 
    </li> 
    ... 
</ul> 

はCSS：

#dropdowns ul { display: none } 
#dropdowns:hover ul { display: block } 

他のCSSのドロップダウンメニューと同様に他のすべて。別の方法で行う必要があるのは、外側のドロップダウンコンテナをホバリングするときにすべてのメニューを表示することだけです。