jQuery 하위 메뉴를 상위로 확장하고 슬라이드 끈 효과 반복 방지

마우스를 올려 놓으면 하위 메뉴가 펼쳐지는 탐색 모음을 만들었습니다. 내 jsFiddle을 참조하십시오.jQuery 하위 메뉴를 상위로 확장하고 슬라이드 끈 효과 반복 방지

메뉴 항목을 가리키면 하위 메뉴가 부모 <nav> (파란색으로 표시)을 벗어나 확장됩니다. 내가 뭘 하느냐는 푸른 색 <nav> 요소가 자식 <ul>과 함께 펼쳐지는 것입니다.

내가 jQuery 나 CSS 솔루션이 필요한지 모르겠지만 지금까지 시도한 모든 것은 헛된 것이었다. 실제로 나타나기 전에

및

마우스를 신속하게 탐색을 통해 가져가 일어나는 경우는 'MENU 1'로 'MENU 3'에서 말하는 그러한 'ONE A'(같은 하위 메뉴 항목에 휴식을), jQuery는 각 하위 메뉴가 열리고 닫히는 반복 루프에서 멈추게됩니다.

이런 일이 발생하지 않도록하려면 무엇을 변경해야합니까?

출처

2012-06-21 Shayne Lighty

$ (this) .find ('ul') 다음에 stop()을 추가하면 애니메이션에 도움이됩니다.

$(document).ready(

function() { 
    $('.menu li ul').hide(); 
    $('.menu li').hover(function(e) { 
     $(this).find('ul').stop().slideToggle("slow"); 
    }); 
});

그리고 메뉴가 확장되지 않는 이유는 "메뉴 목록"이 절대 위치로 설정되어 있기 때문입니다. 요소가 절대 위치에있을 때 정상적인 흐름에서 제거됩니다.

출처

2012-06-21 09:10:10 Ivan

감사 @Ivan이 난 후였다 정확하게 완벽했다. 같은 문제를 겪고있는 다른 누군가에게 한 마디 ...이 픽스는 처음에는 나에게 도움이되지 않았지만 하위 메뉴의 위치를 엉망으로 만들었습니다. 이전 버전의 jQuery (1.5)를 실행하고이 솔루션이 최신으로 업데이트 한 것을 깨달았을 때만이었습니다. –

... 포지셔닝은 지금 당신이 말했던 것을 의미합니다. 그 주위에 내가 생각할 수있는 유일한 방법은 각 하위 메뉴에 대해 서로 다른 위치를 설정하는 것입니다. 더 간단한 방법이 아니면 내가 시도해 볼게. –

애니메이션이 대기하고 강제로 중지하지 않는 한 계속 실행되기 때문에 발생합니다.

JQuery's stop() 함수가 도움이 될 것입니다.

stop(clearQueue, jumpToEnd) - 일치하는 요소에서 현재 실행중인 애니메이션을 중지합니다.

$(this).find('ul').stop(true, true).slideToggle("slow");

확인 업데이트 된 바이올린 : http://jsfiddle.net/aQBeZ/9/

출처

2012-06-21 09:10:32 Asif

jQuery 하위 메뉴를 상위로 확장하고 슬라이드 끈 효과 반복 방지

답변

관련 문제