사용자가 버튼을 클릭하는 경우 페이지를 동적으로 변경하는 경우가 많다. 그런 경우에 토클을 사용하면 보여지고 보여지지 않고가 순차적으로 처리된다.
좋아요 기능 같은 것을 구현할 때 하트를 클릭하면 색이 변하고, 채워진 하트를 클릭하면 다시 빈 하트가 되게 하는 것 등이 토클로 가능하다.
코드 : 토클 기능 코드
- 참고로 토글의 경우 제이쿼리 버전에 따라 제대로 실행이 안되는 경우가 있으니 참고!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
button{
display:block;
border: none;
border-radius:10px;
background-color: black;
color: white;
font-size:20px;
padding: 10px 20px;
margin: 10px;
}
button:hover{
background-color: gray;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript">
$(function() {
$("button").click(function() {
$(this).next().toggle(1000, function() {
alert("ok");
});
});
});
</script>
</head>
<body>
<button>Open & Close</button>
<div>
<h1>HTML5 Tutorial</h1>
<p>With HTML you can create your own Website.
This tutorial teaches you everything about HTML.
HTML is easy to learn - You will enjoy it.</p>
</div>
<button>Open & Close</button>
<div>
<h1>Examples in Every Chapter</h1>
<p>This HTML tutorial contains hundreds of HTML examples.With our online HTML editor, you can edit the HTML, and click on a button to view the result.</p>
</div>
</body>
</html>
결과 : 사용자 화면
- 사용자가 버튼을 클릭하면 이미지가 보여지고, 사라지게 하는 기능
- 토클 기능의 timer 효과가 있어서 자연스럽게 사라지고, 나타나게 할 수 있다.
ㅇ 모든 버튼이 클릭되지 않은 경우 close 상태
ㅇ 하나의 버튼만 클릭되어 정보가 보여지는 상태
ㅇ 2개의 버튼이 모두 클릭되어 정보다 전체 다 보여지는 상태
반응형
'Java Script > jQuery' 카테고리의 다른 글
| jQuery 예제, To Do List & 학생 점수 입력 테이블 (0) | 2019.05.14 |
|---|---|
| 동일 예제 JavaScript VS jQuery 비교! (0) | 2019.05.14 |
| jQuery 예제, 체크박스 모두 선택 (0) | 2019.05.14 |
| 제이쿼리로 이미지 슬라이더 구현 (0) | 2019.05.14 |
| jQuery 애니메이션 큐 (이벤트 누적 제어) (0) | 2019.05.14 |
댓글