사용자 정의 jQuery 드롭 다운

Question

오버 상태를 기반으로 요소를 숨기거나 표시하는 jQuery를 사용하여 사용자 정의 간단한 드롭 다운을 작성합니다.

내가 지금 가지고있는 문제는 숨겨진 표시된 요소를 살펴볼 때 생성 된 드롭 다운으로 마우스를 이동할 수 없다는 것입니다.

그 문제를 해결하는 방법에 대한 의견이 있으면 내가 가지고있는 것을하기에 더 쉬운 방법이 있습니까? 나는 이것을 재사용 할 것이고 코드를 설정하는 가장 좋은 방법은 6 번 복사/붙여 넣기가 필요 없다는 것을 확신하지 않을 것이다.

$(function(){ 
    $("#dog-nav").hover(
     function(){ 
     $(".sub-drop-box-dog").show("fast"); 
     }, 
     function(){ 
     $(".sub-drop-box-dog").hide("fast"); 
     } 
    ); 
    $("#cat-nav").hover(
     function(){ 
     $(".sub-drop-box-cat").show("fast"); 
     }, 
     function(){ 
     $(".sub-drop-box-cat").hide("fast"); 
     } 
    ); 

}); 

Answer 1

이 같은 HTML을 사용한다 : 다음

<div id="#menu"> 
    <ul> 
    <li> 
     <a href="#">Menu1</a> 
     <ul> 
     <li><a href="#">Submenu A</a></li> 
     <li><a href="#">Submenu B</a></li> 
     <li><a href="#">Submenu C</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Menu2</a> 
     <ul> 
     <li><a href="#">Submenu D</a></li> 
     <li><a href="#">Submenu E</a></li> 
     <li><a href="#">Submenu F</a></li> 
     </ul> 
    </li> 
    </ul> 
</div> 

그리고 jQuery를 다음과 같이 :

 
$("#menu li").hover(function() { 
    $(this).find("ul").show("fast"); 
}, function() { 
    $(this).find("ul").hide("fast"); 
}); 

당신이 하위 메뉴를 통해 마우스를 가져 가면 그런 다음, 당신이 실제로 여전히 메인 메뉴 위에 마우스를 올려 그런 다음 닫히지 않습니다. 위의 예도 유연하므로 각 메뉴에 대해 한 번만 쓸 필요는 없습니다.

Answer 2

마우스 조종 오류를 수용하려면 jQuery.hoverIntent 및/또는 jQuery.superfish 플러그인을 확인해야합니다.