자바스크립트에서 특정 메뉴를 누르면, 그 안의 항목들이 부드럽게 아래로 열리고, 닫히는 효과를 본 적이 있으실 겁니다.
이것들은 slideDown(), slideUp() 메소드를 활용한 것입니다.
(jQuery가 제공하는 메소드로, script 태그 등으로 jQuery 파일을 선언해 놓아야 합니다.)
위처럼 slideDown() 메소드는 말 그대로 슬라이드 효과를 아래로 준다는 뜻이 됩니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
...
<body>
<p id="open">여기를 클릭하세요</p>
<div id="list" style="padding: 1em; width:200px; height:100px; background-color: lightskyblue;">
<ul>
<li>목록 1</li>
<li>목록 2</li>
<li>목록 3</li>
</ul>
</div>
</body>
...
<script type="text/javascript">
$('#list').hide(); // 초기에 list id를 가진 div를 보이지 않게 숨긴다.
$('#open').click(function() { // html 내에서 open이라는 id를 가진 요소를 클릭할 시 발생하는 이벤트 함수
$('#list').slideDown(); // list 라는 id를 가진 div를 slideDown
});
</script>
반대로 펼쳐져 있는 요소를 slideUp 하려면 다음과 같이 작성합니다.
1
2
3
4
5
6
7
<script type="text/javascript">
$('#open').click(function() {
$('#list').slideUp();
});
</script>