Question

那里是否有导航下拉菜单，当您将鼠标悬停在一个项目上时，每个下拉菜单都会关闭？我知道它可能有点忙，但对于这个项目来说这是必不可少的。它可以使用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下拉列表。您需要做的唯一不同的事情是将鼠标悬停在外部下拉列表容器上时显示所有菜单。

下拉菜单一次打开所有下降的下降

2 个答案: