jquery .toggle()
.toggle()은 두개의 상태를 번갈아 바꾸는 설정값 같은것이라 할 수 있다.
토글이란 하나의 설정 값으로부터 다른 값으로 전환하는 것이다. 토글이라는 용어는 오직 두 가지 상태밖에는 없는 상황에서, 스위치를 한번 누르면 한 값이 되고, 다시 한번 누르면 다른 값으로 변하는 것을 의미한다.
예시들 | ||
명칭 | ON | OFF |
집의 전등 스위치 | 불이 켜짐 | 불이 꺼짐 |
키보드의 CAPSLOCK | 영어 대문자가 기본으로 설정 | 영어 소문자가 기본으로 설정 |
멀티탭에 전원버튼 | 멀티탭에 전기를 공급한다 | 멀티탭에 전기를 공급하지 않는다 |
HTML 체크박스 | 체크 박스가 켜짐 | 체크 박스가 꺼짐 |
컴퓨터 언어 bool (boolean) | true | false |
휴대폰 상단의 많은 기능들 비행기모드 손전등 wifi | 비행기모드 켜짐 손전등켜짐 wifi켜짐 | 비행기모드꺼짐 손전등꺼짐 wifi 사용안함 |
토글이 어떤것인지는 위의 예시들을 보면 어떤것인지 대략 감을 잡을수 있다 생각한다.
이해가 아직 안된다면 아래의 이미지를 보면 도움이 될것이다.
.toggle()는 예전에 언급했던 show()와 hide()를 반복적으로 수행하는 제이쿼리 함수이다.
[웹언어/jQuery] - [jQuery] 제이쿼리 show / hide
[jQuery] 제이쿼리 show / hide
jquery .show() .show()는 요소의 css가 display:none; 일 때 요소를 display:block;으로 바꿔주는 함수이다. 예시) 아래의 button을 눌러서 숨겨진 요소를 보이게 할 수 있다. 요소 보이게 하기 팝업입니다. $(d..
jh91.tistory.com
.toggle()는 선택한 요소가 보이면 보이지 않게, 보이지 않으면 보이게 해준다.
.toggle('시간') 토글의 괄호() 안에는 시간을 넣을수 있다.
컴퓨터에서 시간은 1000이 1초이다
약어인 fast와 slow를 넣을수도 있는데 fast는 200 (0.2초) / slow는 600 (0.6초)에 해당하며
기본값(아무것도 넣지 않은 상태)은 400 (0.4초)로 설정됩니다.
.toggle('fast'); //(0.2초) .toggle('slow'); //(0.6초) .toggle('500'); //(0.5초).toggle()에는 ()에 click 처럼 function을 넣을수 있다.
.toggle(function(){ //함수(); //다양한 매소드 들을 사용할 수 있다. //토글의 function은 요소가 나타난 다음에 함수를 실행한다. }).toggle()은 show와 hide의 반복이기때문에 스위치 역할은 할수 없다
집으로 따지면 전등의 역할은 할 수 있다.
(불이 켜지고 꺼지고 요소가 사라졌다 나타났다)
toggle을 컨트롤 할 수 있는 버튼을 만들어 toggle을 제어 하자
코드팬
See the Pen jQuery .toggle() by 윤재현 (@jh91) on CodePen.
Learn how to create a "toggle switch" (on/off button) with CSS.
Try it Yourself »
How To Create a Toggle Switch
Step 1) Add HTML:Example
<!-- Rectangular switch -->
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
<!--
Rounded switch -->
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
Example
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity:
0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
Try it Yourself »