jQuery 강좌2. 펼침목록 만들기

이번 강좌에서는 펼침목록 만들기를 해보겠습니다.

 toggle.htm

예제보기를 원하시면 위 htm 파일 링크를 클릭하세요.

jQuery 를 처음 접하시는 분은 강좌 1부분부터 보시는걸 권장합니다.

그럼 예제1 부분에서 h3 엘리먼트 영역을 클릭시 아래의 <p> 엘리먼트 영역이 사라지는 것을 보도록 하지요. 소스 코드는 아래와 같습니다.

<script type="text/javascript">

$(document).ready(function(){

// 예제1 코드

$("#first h3").toggle(function(e){ // 선택자에 toggle이라는 이벤트를 주었습니다.

e.preventDefault(); // 아직은 신경쓰지 않으셔도 되는 부분

$(this).next().slideUp();  //next()와 slideUp() 이라는 메서드가 보입니다.

},function(e){

e.preventDefault();

$(this).next().slideDown();

});

});

</script>

먼저 toggle(fn1,fn2) 이벤트에 대해서 살펴보도록 하겠습니다. 저번 강의시간에 click(fn) 이라는 이벤트에 대해서는 설명을 드렸습니다. toggle도 click 과 같은 이벤트인데, 인자로 두개의 Callback function 을 갖는것을 볼수 있습니다.

즉, toggle 이벤트는 한번 클릭이 될때마다 fn1 과 fn2을 번갈아 실행하게 되지요.

toggle 인자로 주어진 첫번째 콜백함수에서 $(this).next().slideUp(); 라는 코드가 보입니다.

$("#first h3") 로 선택한 대상을 한번 클릭하면 클릭된 대상 $(this)의 다음 대상 next() 을 슬라이드업 slideUp() 하라는 내용이지요. 여기서 다음 대상을 찾아보면 마크업 상에 <h3> 다음에는 <p> 엘리멘트가 있지요? 이것을 선택하게 됩니다. 즉 <p>엘리멘트가 슬라이드업(사라짐) 이 되는것이지요.

마찬가지로 대상을 한번 더 클릭하게 되면 toggle의 두번째 인자인 콜백함수 $(this).next().slideDown(); 의 내용이 실행됩니다.

두번째 예제는 여러분들이 한번 보시고 이해해 보세요. 첫번째 예제를 이해하시면 두번째도 충분히 이해하실수 있습니다.

언제나 질문이나 기타 피드백 환영합니다.

출처 - http://webnoon.net