使用jQuery和CSS创建简单的下拉菜单

Question

我在使用jQuery/css创建下拉菜单时遇到了麻烦。

现在每个类别的每一个下拉菜单是有一个隐藏的显示，直到一类是徘徊在一个div。我试图让jquery显示/隐藏悬停和mouseleave上正确的div。

我使用的逻辑是：显示下拉如果任一类别链接或下拉菜单悬停菜单，否则隐藏在下拉菜单中。

更具体地说，我遇到的问题是下拉列表显示，只要用户将鼠标悬停在类别链接...它只要下拉DIV不徘徊关闭。我需要它关闭，如果下拉没有徘徊或如果类别链接没有徘徊......

现在第一个下拉菜单保持打开状态，即使我将鼠标悬停在相邻类别上，试图查看邻近的下拉菜单的类别，除非我首先将鼠标悬停在此下拉菜单上。

此外，每个格的下拉菜单下拉第一当用户当用户将鼠标悬停在下拉DIV，这使得它看起来车悬停在类别和试。

我知道这会少了很多代码来实现:)请记住，我是很新的JQuery的。另外请记住，我想保留下拉菜单的DIV设置，我不使用列表。

这里是我的jQuery代码：

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#productsLink").hover(function(){ 
      $("#productsMenu").slideDown(); 
     }); 
     $("#productsLink, #productsMenu").hover(function(){ 
      $("#productsLink").css("color","red"); 
     }); 
     $("#productsMenu").mouseleave(function(){ 
      $("#productsLink").css('color', 'white'); 
      $("#productsMenu").slideUp(); 
     }); 
     $("#aboutLink").hover(function(){ 
      $("#aboutMenu").slideDown(); 
      $(this).css("color","red"); 
     }); 
     $("#aboutMenu").hover(function(){ 
      $("#aboutMenu").hide(); 
     }); 
     $("#aboutMenu").hover(function(){ 
      $("#aboutLink").css('color', 'red'); 
     }); 
     $("#aboutMenu").mouseleave(function(){ 
      $("#aboutLink").css('color', 'white'); 
     }); 
    }); 
    </script> 

Answer 1

这个问题少谈你的JS和更多的标记。解决这个问题最简单的方法是将你的菜单项和你的下拉列表放在一个div中的每个项目上，然后在特定的div上触发你的悬停事件。

<div id="nav-item1"> 
     <a id="nav-link1">nav item</a> 
     <div id="dropdown1">Some Stuff</div> 
</div> 

这种方式只要在nav-item1 div中的某个部分悬停（链接或菜单），它将保持可见状态。

有一些方法可以用jQuery来实现，但这是一个简单的修复方法，它将使用更少的代码。请牢记这些事件中的每一个都是分开的。这就是为什么你用双动画获得奇怪的行为。将鼠标悬停在链接上会触发您的某个事件，将鼠标悬停在菜单上会触发第二个事件。你可以用一些if语句来阻止它，但是不要让它比自己更难。