下拉菜單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事件觸發。