toggleClass 메서드

toggleClass 메서드는 CSS 클래스의 추가/제거를 전환합니다: 클래스가 없으면 추가하고, 있으면 제거합니다.

구문

단일 CSS 클래스:

javascript$(selector).toggleClass(class name);

두 번째 매개변수에 따라 CSS 클래스를 추가만 하거나 제거만 합니다. 두 번째 매개변수는 true 또는 false 값을 받습니다:

javascript$(selector).toggleClass(CSS class name, state);

여러 CSS 클래스:

javascript$(selector).toggleClass(['class1', 'class2', 'class3', '...']);

두 번째 매개변수에 따라 CSS 클래스들을 추가만 하거나 제거만 합니다:

javascript$(selector).toggleClass(['class1', 'class2', 'class3', '...'], state');

셋의 각 요소에 함수 적용하기, 상태는 true 또는 false일 수 있으며, 메서드에게 CSS 클래스를 추가만 할지 제거만 할지 지정합니다:

javascript$(selector).toggleClass(function(index in set, current classes of element, state), [state]);

예제

우리 단락에는 이미 두 개의 클래스가 있습니다. www 클래스를 추가해 보겠습니다:

html<p id="test" class="eee ggg">text</p>

javascript$('#test').toggleClass('www');

HTML 코드는 다음과 같이 될 것입니다:

html<p id="test" class="eee ggg www">text</p>

예제

이제 요소에 www 클래스가 이미 있습니다. - 제거해 보겠습니다:

html<p id="test" class="eee ggg www">text</p>

javascript$('#test').toggleClass('www');

HTML 코드는 다음과 같이 될 것입니다:

html<p id="test" class="eee ggg">text</p>

참고 항목