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






YOUR COMMENT IS THE CRITICAL SUCCESS FACTOR FOR THE QUALITY OF BLOG POST
  1. BlogIcon 남시언 2012.11.22 09:38 신고  댓글주소  수정/삭제  댓글쓰기

    음... 그러고보니 나도 이런 식의 포스팅을 많이 하면서 블로그가 활성화 되었던 느낌이 납니다.
    나중에는 이런 포스트들이 참 도움이 많이 되더군요.
    화이팅입니다!