728x90
반응형
아래의 코드를 사용하면 간단하게 처리가 가능하다.
slideToggle
jquery를 사용한다면 그 아이디, 혹은 클래스의 태그에 슬라이드 효과를 줄 수 있다.
887392
Please confirm that you want to open a website made on PLAYCODE.
887392.playcode.io
예시코드:
js
$('.slideButton').click(function(){
$('.scrolldown').slideToggle();
})
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<button type="button" class='slideButton'>click me to slidedown!</button>
</div>
<div class='scrolldown'>
scrolldownTag
</div>
<script src="script.js"></script>
</body>
</html>
css는 생략하겠습니다
728x90
반응형
'국비과정 > 자바스크립트 (JSP & Servlet 포함)' 카테고리의 다른 글
| 원하는 데이터만 사용할 수 있는 ajax용 FormData (0) | 2022.04.05 |
|---|---|
| 파이썬 (1054, "Unknown column 'nan' in 'field list'") (0) | 2022.03.19 |
| JS 마우스 이벤트 관련 (0) | 2022.03.18 |
| EL expression EL 표기법 사용하기 (0) | 2022.03.14 |
| 자바스크립트 이벤트 종류 (0) | 2022.03.09 |