상세 컨텐츠

본문 제목

[javascript] jQuery slideToggle 메뉴

헉!!/javascript

by 권태성 2012. 11. 22. 09:30

본문

이번에 프로젝트를 하면서 jquery를 이용하여 메뉴가 접혀져 있다가 아래로 펼쳐지는 스크립트를 만들어 보았습니다.

기본적으로 jquery1.4.4 이상이 import 되어있어야 합니다.


<script type="text/javascript">

//<![CDATA[

$(document).ready(function(){

for(var i=1; i<8; i++){

$("#sub"+i).hide();

}

});

//]]>

</script>

처음 웹문서가 열릴때의 세팅입니다. 모든 서브메뉴를 hide로 처리하여 보이지 않게 합니다.

function menuclick(index){

for(var i=1; i<8; i++){

$("#sub"+i).hide();

}

$("#sub"+index).slideToggle("600");

}

그리고 나서 메뉴에 클릭이 들어오면 먼저 모든 서브메뉴를 hide 처리 했다가 현재 index의 서브메뉴만 slideToggle을 통해 열어줍니다.

jquery를 처음 작성해보는거라 제대로 사용한지는 모르겠지만.. 짧은 스크립트 몇줄로 처리할 수 있었습니다.






관련글 더보기