下拉菜单jquery

Question

我试图做类似aoro dot ro的下拉菜单。在铬，safari，IE6似乎工作，但我在Mozilla Firefox 3.6我有一些问题。如果我将光标移动到快速，我的下拉菜单消失。我认为这个问题是从第一元素的儿童。 在这一刻，我不要错过t know what i。谢谢。

代码如下：

<div class="navigator"> 
    <ul> 
    <li id="for_her"><a href="#" title="I`Parfumuri.ro | Parfumuri pentru EA"><span class="fpi"></span> Parfumuri pentru ea</a></li> 

    <li id="for_him"><a href="#" title="I`Parfumuri.ro | Parfumuri pentru EL"><span class="mpi"></span> Parfumuri pentru el</a></li> 

    <li id="gifts"><a href="#" title="I`Parfumuri.ro | Seturi cadou"><span class="sci"></span> Seturi Cadou</a> 
    <div class="under_menu" style="display:none;"> 
     <div class="vertical_r"> 
     <h5>Cadouri pentru ea</h5> 
     <ul> 
     <li><a href="#">Produs 1</a></li><li><a href="#">Produs 2</a></li></ul></div> 
     <div class="vertical_r"> 
     <h5>Cadouri pentru el</h5> 
     <ul> 
     <li><a href="#">Produs 1</a></li><li><a href="#">Produs 2</a></li></ul></div> 
     </div> 

</li> 
</ul> 
</div> 



     $("#gifts").mouseover(function(){       
         $(this).children().show();            
     }); 
     $("#gifts > .under_menu").children().mouseover(function(){ 

        $("#gifts > .under_menu").show(); 
     }); 

     $(document).bind('mouseout',function(e){ 
       var click1 = $(e.target).attr('id'); 
       var click2 = $(e.target).attr('class'); 
       if(click1 != "gifts" || click2 != "under_menu"){ 
          $(".under_menu").hide(); 
        } 
     }); 

Answer 1

我认为问题是，你有一点点的竞争条件怎么回事。

如果你从一个孩子移动到另一个孩子（#gifts），那么你有一个mouseout和mouseover被触发。如果鼠标最后触发，则隐藏整个菜单。

你应该做的就是实现一个超时时间为200ms的例子），并且在调用鼠标悬停的时候清除该超时。

那样mouseout会花费0.2s来触发 - 大量的时间让下一个mouseover事件触发。