테스트 사이트 - 개발 중인 베타 버전입니다

제이쿼리 드롭다운 메뉴 채택완료

코딩룰루 3년 전 조회 2,665

안녕하세요

드롭다운 메뉴 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개

채택된 답변
+20 포인트

$('.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();
    }
);
})

이렇게 사용하시면되겠네요 그럼 이벤트정상작동됩니다. ^^

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

코딩룰루
3년 전
엇 감사합니다! 집에서 할 때는 stop()을 넣어놔도 메뉴 위에 마우스를 계속 왔다갔다하면 렉 걸린 것처럼 슬라이드가 내려가고 올라가고 했는데 지금은 안 그렇네요!! 감사합니다ㅎ-ㅎ

댓글을 작성하려면 로그인이 필요합니다.

코딩룰루

지금 대충 만들어봤는데, 오류 아닌 오류들이 생기네요..

https://codepen.io/940121/pen/XWVpyYv

여기서 중복이벤트는 안 생기는데

이 오류들은 왜 생기는지 아실까요?

 

그 중복이벤트가 메뉴를 계속 hover 하고 있으면

1~2초내 계속 slide up&down이 됩니다

 

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

코딩룰루

근데 구글링을 해보면 stop()을 쓰면 중복 이벤트가 사라진다고 돼있는데

안 사라지는 경우는 무엇일까요?ㅠ-ㅠ

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

멀티트리플
3년 전
룰루님이 말하는 중복이벤트가 어떤 이벤트가 발생되는지 잘모르겠습니다.
혹시 사이트 주소를 남겨주시면 확인해볼께요
코딩룰루
3년 전
감사합니다!! 해결됐습니당ㅎ-ㅎ

댓글을 작성하려면 로그인이 필요합니다.

검색창을 통해 다른분들이 만든것중에 본이 적용할 디자인과 어울리는 소스를 받아서 사용해보시는것도 좋을거 같아요

구글 검색창에 제이쿼리 메뉴 드롭다운 치시면 많은 정보들이 나와요

일반적인거 하나 링크하도록 할께요

https://blog.naver.com/PostView.nhn?isHttpsRedirect=true&blogId=st004329&logNo=221003087266&parentCategoryNo=&categoryNo=22&viewDate=&isShowPopularPosts=true&from=search

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인