[jQuery] 제이쿼리 toggle

jquert toggle 썸네일

 

jquery .toggle()

 

.toggle()은 두개의 상태를 번갈아 바꾸는 설정값 같은것이라 할 수 있다.

 

 

토글이란 하나의 설정 값으로부터 다른 값으로 전환하는 것이다. 토글이라는 용어는 오직 두 가지 상태밖에는 없는 상황에서, 스위치를 한번 누르면 한 값이 되고, 다시 한번 누르면 다른 값으로 변하는 것을 의미한다.

 

예시들
명칭	ON	OFF
집의 전등 스위치	불이 켜짐	불이 꺼짐
키보드의 CAPSLOCK	영어 대문자가 기본으로 설정	영어 소문자가 기본으로 설정
멀티탭에 전원버튼	멀티탭에 전기를 공급한다	멀티탭에 전기를 공급하지 않는다
HTML 체크박스	체크 박스가 켜짐	체크 박스가 꺼짐
컴퓨터 언어 bool (boolean)	true	false
휴대폰 상단의 많은 기능들 비행기모드 손전등 wifi	비행기모드 켜짐 손전등켜짐 wifi켜짐	비행기모드꺼짐 손전등꺼짐 wifi 사용안함

 

 

토글이 어떤것인지는 위의 예시들을 보면 어떤것인지 대략 감을 잡을수 있다 생각한다. 

이해가 아직 안된다면 아래의 이미지를 보면 도움이 될것이다.

 

https://blog.prototypr.io/create-a-scenic-day-and-night-toggle-button-with-html-and-css-37a8e2532e68

http://www.sebong.co.kr/1007

https://ko.wikihow.com/Caps-Lock-%ED%82%A4-%EB%81%84%EB%8A%94-%EB%B0%A9%EB%B2%95

 

 

 

.toggle()는 예전에 언급했던 show()와 hide()를 반복적으로 수행하는 제이쿼리 함수이다.

 

 

[웹언어/jQuery] - [jQuery] 제이쿼리 show / hide

[jQuery] 제이쿼리 show / hide

.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.