[javascript] jQuery slideToggle 메뉴

이번에 프로젝트를 하면서 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를 처음 작성해보는거라 제대로 사용한지는 모르겠지만.. 짧은 스크립트 몇줄로 처리할 수 있었습니다.