채택완료

제이쿼리 드롭다운 메뉴

2022-03-25 (금) 09:05:41 3,158

안녕하세요

드롭다운 메뉴 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개 / 댓글 3개

채택된 답변
+20 포인트
2022-03-25 (금) 12:58:08

$('.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개

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

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

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

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

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

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

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

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

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

답변에 대한 댓글 2개

2022-03-25 (금) 11:33:44
룰루님이 말하는 중복이벤트가 어떤 이벤트가 발생되는지 잘모르겠습니다.
혹시 사이트 주소를 남겨주시면 확인해볼께요
감사합니다!! 해결됐습니당ㅎ-ㅎ
2022-03-25 (금) 11:09:25

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

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

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

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

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