javascript 드롭 다운 메뉴 질문

Question

javascript/jquery를 사용하여 메뉴를 드롭 다운하려하지만 내 머리를 둥글게 할 수 없습니다.

메뉴 항목을 마우스로 가리키면 많은 자바 스크립트 메뉴와 유사한 방식으로 다른 메뉴가 포함 된 div를 표시해야합니다.

내가 겪고있는 문제는 메뉴 항목의 mouseout에서 div가 사라질 필요가 있다는 것입니다. div에 마우스를 올려 놓지 않으면 div가 롤오프 될 때까지 거기에 있어야합니다.

문제는 메뉴 항목의 mouseout 이벤트가 div의 mouseover 이벤트보다 먼저 발생한다는 것입니다.

내가 말하고자하는 것은 div가 메뉴와 div를 다루는 영역의 mouseout에서만 사라질 것이라는 것입니다.

누구에게나 의미가 있습니까? (아래 코드)

<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이 발생하면 한 가지 해결책이 타임 아웃을 시작할 수 있습니다. 이 방법을 사용하면 메뉴를 사용하기가 어려워집니다.