 |
|
| |
| jQuery toggleClass() Methods |
|
|
  |
8년 전
|
해당 객체에 Class값을 켜고 끄는 기능을 한다. (터치식 스위치라고 생각하면 된다.)
기본적인 사용방법.
#('태그명,아이디명,클래스명').click(function(){
$(this).toggleClass('클릭시적용될클래스명');
});
예제. 1) 아이디값이 color인 태그 클릭 시 클래스값 redColor을 적용 및 해제하기
<!doctype html>
<html lang="ko">
<head>
<title>toggleClass 예제</title>
<meta charset="utf-8">
<style type="text/css">
.redColor {color: #f00}
</style>
</head>
<body>
<div id="color">클릭하면 글자가 빨강색으로 바뀝니다.</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$('#color').click(function(){
$(this).toggleClass('redColor');
});
</script>
</body>
</html>
예제. 2) 다중토글 적용 : 클래식 명이 sideBtn인 태그를 활용하여 sideMenu에 있는 값을 토글하기.
<!doctype html>
<html lang="ko">
<head>
<title>toggleClass 예제</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style type="text/css">
aside {
position: fixed; width: 200px; height: 100%; top: 0; left: -200px; z-index: 100;
background: #ddd;
}
#container {position: relative; margin: 0 10px;}
.sideBtn {position: fixed; width: 25px; height: 25px; top: 0; left: 0; background: #c00; z-index: 999;}
aside.slide {left: 0;}
.sideBtn.active {left: 200px}
aside, div {
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
</style>
</head>
<body>
<aside>사이드바</aside>
<div class="sideBtn"></div>
<div id="container"></div>
<script type="text/javascript">
var sideMenu = function() {
$('aside').toggleClass('slide');
$('.sideBtn').toggleClass('active');
};
$('.sideBtn').click(function() {
sideMenu();
});
</script>
</body>
</html>
sideBtn이라는 클레스를 가진 태그를 클릭하였을 때, sideMenu의 값을 실행한다.
sideBtn 클릭 시
1. aside에 slide라는 클레스값 추가
2. widgetBtn에 active 클레스값 추가
위의 클레스값이 있을경우
1. aside에 slide라는 클레스값 제거
2. widgetBtn에 active 클레스값 제거
|
|
 추천 : 312 |
추천
목록
|
|
| |
|
