Toggle에 관해 궁금한 사항이있습니다

Question

안녕하세요 웹 공부를 하고있는 학생입니다. 정말 하다하다 답을 모르겠어서 이렇게 글 남깁니다...ㅠ.ㅠ

 

토글 애니메이션을 작성할려고 하는데...ㅠ.ㅠ 제이쿼리 버전은 2.1.1버전이구요

 

 $(".mobile-header-navi-menu").toggle(function(e){

    e.preventDefault();

        $(".mobile-menu-01").addClass("menu-on-a");

        $(".mobile-menu-02").addClass("menu-on-b");

        $(".mobile-menu-03").addClass("menu-on-c");

        $(".mobile-header-navi").slideDown();

    },function(e){

    e.preventDefault();

        $(".mobile-menu-01").removeClass("menu-on-a");

        $(".mobile-menu-02").removeClass("menu-on-b");

        $(".mobile-menu-03").removeClass("menu-on-c");

        $(".mobile-header-navi").slideUp();

    });

이런식으로 모바일 네비 메뉴 버튼을 클릭하면

 

모바일 메뉴 1,2,3이 애니메이션이 되고

모바일 헤드 네비창이 하단으로 내려오면서 생성되고

 

다시 한번 누르면 메뉴1,2,3번이 다시 백애니메이션이 되고

모바일 헤드 네비창이 상단으로 올라가면서 닫히는 토글효과를 만들고싶은데...ㅠ.ㅠ

제이쿼리 구문을 입력하니 메뉴바 위치도 변동이되더라구요

 

어떻게 하는지 한번만 설명을 잘해주시면...ㅠ.ㅠ 제가 찰떡같이 알아듣고! 정말 열심히 공부를 하겠습니다...ㅠ.ㅠ

Answer 1

외부에서 볼수있는 상태에서 작업을 하신다면 해당 작업물의 접근 URL을 알려주시면 답변드리기가 좋을것 같습니다. 온전히 자바스크립트 코드만으로 작동되는게 아닌듯 싶네요. Class를 add하고 remove 하는 것을 보면 css 코드도 확인이 되어야 할 것 같습니다. 외부에서는 볼 수 없는 로컬에서 작업중이라면 비슷한 작동을 하는 웹사이트를 알려주셔도 됩니다. 또는 Jsfiddle.net 웹사이트를 이용해서 코드를 작성후 url을 보내주셔도 됩니다.

Comments

https://jsfiddle.net/qg1s0a9n/

작성하던 URL 공유드립니다.

테스트로 만들었을때는 이런식으로 작성을 해도 큰문제없이 작동이되었는데...ㅠ.ㅠ

제이쿼리 버전이 2.1.1버전으로 올라가고, 미디어쿼리로 반응형 웹을 만들다보니 모바일사이즈일때만 적용을해서 그런가 메뉴버튼이 사라지는 현상이 생기거나 나머지 구문들이 작동을 안하는 현상이 일어나더라구요...ㅠ.ㅠ

자바 구문에 제이쿼리 구문 넣어서 공유드립니다 정말 감사합니다...ㅠ.ㅠ

Answer 2

코드 수정을 하셨나요?

요새 프로그램 개발 마무리 때문에 바쁘다보니 어제 답변을 드리지못했습니다.

일단 코드는 기본적으로 작동이 되는 것 같습니다만 수정을 하지 않으셨다면 어떤 질문인지 이해가 안됩니다.

그리고 참고하실 것은 toggle 이벤트 메소드는 jquery 1.9 버전부터 제거되었습니다. 이후 버전부터는 slide 효과를 적용하는 경우에는 slideToggle() 메소드를 사용하시면 될 것 같습니다.

일단 현재 어떤 상황인지를 알려주셨으면 합니다.

Comments

간단하게 다른 방식으로 코드를 수정해서 작동시켜 봤습니다.

https://jsfiddle.net/Cydemy/b9Lerhjx/