제이쿼리 드롭다운 메뉴
본문
안녕하세요
드롭다운 메뉴 jquery로 했는데
$(document).ready(function(
) { $(".main>li").mouseover(function(
) { $(this).children(".sub").stop().slideDown(); });
$(".main>li").mouseleave(function(
) { $(this).children(".sub").stop().slideUp(); }); });
stop을 해도 중복 이벤트가 계속 실행됩니다,,
stop말고 다른 방법이 있을까요?
드롭다운 메뉴 jquery로 부드럽게 내려오는 방법은 뭐가 있을까요??
답변 4
$('.main>li').hover(
function(){
$(this).find('.sub').stop().slideDown();
},
function(){
$(this).find('.sub').stop().slideUp();
}
);
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ코드핀작업내용으로 보면
$(document).ready(function() {
$('.menu>li').hover(
function(){
$(this).find('.submenu').stop().slideDown();
},
function(){
$(this).find('.submenu').stop().slideUp();
}
);
})
이렇게 사용하시면되겠네요 그럼 이벤트정상작동됩니다. ^^
검색창을 통해 다른분들이 만든것중에 본이 적용할 디자인과 어울리는 소스를 받아서 사용해보시는것도 좋을거 같아요
구글 검색창에 제이쿼리 메뉴 드롭다운 치시면 많은 정보들이 나와요
일반적인거 하나 링크하도록 할께요
근데 구글링을 해보면 stop()을 쓰면 중복 이벤트가 사라진다고 돼있는데
안 사라지는 경우는 무엇일까요?ㅠ-ㅠ
지금 대충 만들어봤는데, 오류 아닌 오류들이 생기네요..
https://codepen.io/940121/pen/XWVpyYv
여기서 중복이벤트는 안 생기는데
이 오류들은 왜 생기는지 아실까요?
그 중복이벤트가 메뉴를 계속 hover 하고 있으면
1~2초내 계속 slide up&down이 됩니다