이번에 프로젝트를 하면서 jquery를 이용하여 메뉴가 접혀져 있다가 아래로 펼쳐지는 스크립트를 만들어 보았습니다.
기본적으로 jquery1.4.4 이상이 import 되어있어야 합니다.
<script type="text/javascript"> //<![CDATA[
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를 처음 작성해보는거라 제대로 사용한지는 모르겠지만.. 짧은 스크립트 몇줄로 처리할 수 있었습니다.
[javascript] 특정 텍스트에 하이라이트 표시하기 (jquery.highlight.js 이용) (0) | 2012.12.27 |
---|---|
[jquery] 웹접근성 관련 slideDown을 사용하지 않은 아코디언 메뉴 (0) | 2012.11.28 |
[javascript] button 태그에서 onClick의 스크립트가 동작하지 않을때 (0) | 2012.11.22 |
[javascript] IE7에서 '속성이나 메서드를 지원하지 않습니다.' 스크립트 오류 (3) | 2012.11.21 |
[javascript] 크롬, 사파리에서 history.back()이 안될때 (0) | 2012.10.09 |