下拉菜單一次打開所有的下降菜單

Question

是否有導航下拉菜單，當您將鼠標懸停在一個項目上時，每個下拉菜單都會下降？我知道這可能有點忙，但對於這個項目來說這是至關重要的。只要它有效，它就可以使用jQuery，只需CSS或其他任何東西。

Answer 1

如果你給所有的菜單一個類，你可以用jQuery全部選擇它們。假設他們都是顯示：無;任何其他顯示/隱藏屬性都將以同樣的方式工作。唯一的問題是，當你將鼠標移離它們都會消失的時候。

$("#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

No javascript required。

HTML：

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

CSS：

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

其他一切與任何其他CSS下拉。唯一需要做的不同是當鼠標懸停在外部下拉容器上時顯示所有菜單。