jquery 드롭 다운 메뉴가 마우스를 올리면 반복적으로 열립니다.

Question

jquery 메뉴에 약간의 문제가 있습니다. 잘 작동하지만 버튼 위로 3 ~ 4 번 이동하면 메뉴가 3 번 또는 4 번 반복적으로 확장되어 종료 될 때까지 기다릴 수 있습니다. 누군가 이걸 어떻게 멈추게 할 수 있니? 여기에 내가 사용하고있는 자바 스크립트가있다 :

<script type="text/javascript"> 
$(function() { 
     $('#dropMenu .level1 .submenu.submenu').hover(function() { 
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).hide(1000); 
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).show(1000); 
}, function() { 
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).show(1000); 
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).hide(1000); 
});}); 
</script> 

이 모든 통찰력은 크게 감사하겠습니다.

감사

Answer 1

당신은 애니메이션이 활성화되면 나타 내기 위해 변수를 추가 할 수 있으며, 이전이 완료되지 않은 경우, 또 다른 하나는 시작하는 것을 허용하지 않습니다.

var isAnimating = false; 
$(function() { 
     $('#dropMenu .level1 .submenu.submenu').hover(function() { 
if (!isAnimating) { 
    $(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).hide(1000); 
    $(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).show(1000); 
    isAnimating = true; 
} 
}, function() { 
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).show(1000); 
$(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).hide(1000); 
isAnimating = false; 
});}); 

Answer 2

간단한 로거 조치로 예기치 않은 결과가 발생했을 때 저는 로버트입니다. 시간이 지남에 따라 요소 플릭 핑을 해결하는 몇 가지 방법을 개발했습니다.

다음과 같은 메뉴 구조가 있다고 가정합니다.

<div id="nav"> 
    <ul> 
    <li> 
     <a href="...">Home</a> 
     <ul> 
     <li><a href="...">New Products</a></li> 
     <li><a href="...">All Products</a></li> 
     <li><a href="...">Specials</a></li> 
     <li><a href="...">Search</a> 
      <ul> 
      <li><a href="...">Site</a></li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    </ul> 
</div> 

CSS 다음과 같은 CSS;

<style> 
    #nav ul li ul{ 
    display:none; 
    } 
</style> 

jQuery something like this;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script> 
    $("#nav ul li").each(function(){ 
    $(this).mouseenter(function(){ 
     $(this).find("ul:first").show(); 
    }).mouseleave(function(){ 
     $(this).find("ul:first").hide(); 
    }); 
    }) 
</script> 

공지 사항,이 예에서 .mouseenter() 및 .mouseexit() 대신 .hover()을 사용하고 있습니다.

왜 .hover()이이 예에서 기대하는대로 작동하지 않습니까? 호버는 단일 요소에서만 작동하며 요소 내에서 무언가를 가리키면 새로운 요소입니다. 나는 이것이 당신의 호버 문제를 정리할 희망 jQuery API Documentation

에

좋은 예입니다.