항상 이미 누가 처음부터 끝까지 만들어놓은 스크립트를

수정만해서 진짜 쉬운 부분은 모르는게 많았다

오늘은 강사님 왈 "장난 수준인" jQuery 스크립트를 작성해 보았다

1. 아래와 같은 메뉴가 있다.

 border랑 백그라운드 컬러만 넣음..ㅋ

보통 볼 수 있는 드롭다운 메뉴처럼 일단은 소개 아래의 소개, 매장안내, 오시는길은 보이지 않아야 한다.

jQuery 라이브러리를 불러오고 (구글에 jquery google cdn 치면 나옴)

위와 같이 스크립트를 작성한다.

보이지 않아야 하는 #gnb .sub를 선택하고 hide 명령을 하면 서브메뉴가 보이지 않게 된다

클릭 이벤트와 클릭시 작동될 부분을 적어준다

그러면 클릭시 서브메뉴가 보이게 된다.

하지만 이 경우 계속 보이게 되어서 처음 클릭하면 보여주고, 다시 클릭하면 사라지게 만들어보았다.

단지 show를 toggle로 바꾸기만 해도 적용이 된다는게 신기(..ㅎㅎㅎㅎ)

이번에는 보통 메뉴처럼 슬라이드를 시켜보자.

슬라이드 시키는 경우도 클릭하면 슬라이드되고, 다시 클릭하면 보이지 않게도 할 수 있다.

slideDown 대신 slideToggle을 적으면된다!

신기해....................하지만 너무쉬워...아직 멀었어ㅠㅠㅠ