一次打开所有下拉菜单的下拉菜单答案

【问题标题】：Drop Down Menu That Opens All Drop Downs at Once一次打开所有下拉菜单的下拉菜单
【发布时间】：2011-06-30 16:57:54
【问题描述】：

是否有一个导航下拉菜单，当您将鼠标悬停在一个项目上时，每个下拉菜单都会下降？我知道这可能有点忙，但对于这个项目来说，这是必不可少的。它可以使用 jQuery、CSS 或其他任何东西，只要它可以工作。

【问题讨论】：

【解决方案1】：

如果你给所有的菜单一个类，你可以用 jQuery 选择它们。假设它们都是 display:none;任何其他显示/隐藏属性都将以相同的方式工作。唯一的问题是，当您将鼠标移开时，它们都会消失。

$("#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');
             }

});

【讨论】：

【解决方案2】：

不需要javascript。

HTML：

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

CSS：

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

与任何其他 CSS 下拉菜单一样。您需要做的唯一不同的事情是在将鼠标悬停在外部下拉容器上时显示所有菜单。

【讨论】：