javascriptドロップダウンメニューの質問

Question

私はjavascript/jqueryを使用してドロップダウンメニューを作成しようとしていますが、私の頭の中に何かを得ることができません。

メニュー項目をマウスオーバーすると、javascriptメニューの多くに似た方法で、別のメニューを含むdivを表示する必要があります。

私が抱えている問題は、メニュー項目のmouseoutを実行すると、divを消さなければならないということです。マウスをdivに移動しない限り、divをロールオフするまでそこに留まる必要があります。

問題は、メニュー項目のmouseoutイベントがdivのmouseoverイベントの前に発生するということです。

私が言っていることは、メニューとdivをカバーする領域のマウスアウト時に消えてしまうということです。

誰にでも意味がありますか？ （下のコード）

<ul id="menu"> 
    <li class="item1"><a href="#"></a></li> 
    <li class="item2"> 
     <a href="#"></a> 
     <div class="dropDownMenu"> 
      <div><a href="#">Sub-item 1</a></div> 
      <div><a href="#">Sub-item 2</a></div> 
      <div><a href="#">Sub-item 3</a></div> 
     </div> 
    </li> 
    <li class="item3"><a href="#"></a></li> 
</ul> 


$('#menu LI > A').mouseover(function(){ 

    $(this).find('dropDownMenu').show(); 

}); 
$('#menu LI > A').mouseout(function(){ 

    $(this).find('dropDownMenu').hide(); 

    ^^^ Only do this if the user hasn't moved on to the drop down menu. 

}); 

Answer 1

マウスオーバーの代わりにmouseenterを使用できます。

Answer 2

"#menu LI> A" .mouseoutが発生したとき（およびdiv.onmouseoverが発生したときにclearTimeout）にタイムアウトを開始している可能性があります。この方法でメニューを使用することもあまり難しくなりません。