jQuery의 토글 클래스

오늘의 포스트는 jQuery의 toggle 클래스에 대해 가르칠 것입니다.

jQuery의 토글 클래스

jQuery는 내장 클래스 toggle 메소드를 제공합니다. 이 이벤트는 클래스의 존재 또는 상태 인수의 값에 따라 일치하는 요소 집합의 각 요소에서 하나 이상의 클래스를 추가하거나 제거합니다.

통사론:

.toggleClass(className).toggleClass(classNames)

1. className은 일치하는 세트의 각 요소에 대해 토글할 하나 이상의 클래스(공백으로 구분)입니다.
2. classNames는 일치하는 세트의 각 요소에 대해 토글하는 클래스 배열입니다.

toggle 메소드는 하나 이상의 클래스를 매개변수로 사용합니다. 일치하는 요소 집합의 요소에 이미 첫 번째 버전의 클래스가 있으면 제거됩니다.

요소에 클래스가 없으면 추가됩니다. 예를 들어 .toggleClass()를 간단한 <div>에 적용할 수 있습니다.

.toggleClass()의 두 번째 모델은 두 번째 매개변수를 사용하여 클래스를 추가하거나 제거할지 여부를 결정합니다. 이 매개변수의 값이 true이면 클래스가 추가됩니다. false인 경우 클래스가 제거됩니다.

인수를 초과하지 않으면 .toggleClass()는 .toggleClass()가 처음으로 호출될 때 요소의 모든 클래스를 토글합니다.

다음 예를 통해 이해해 봅시다.

<p class="blue">Click on me to change color</p>

.blue {
    color: blue;
  }
.highlight {
    background: yellow;
}

$('p').click(function() {
  $(this).toggleClass('highlight');
});

위의 예는 blue 클래스로 단락 태그를 정의했습니다. 사용자가 단락을 클릭하면 .toggleClass("highlight")가 단락에 적용됩니다.

jQuery를 지원하는 모든 브라우저에서 위의 코드를 실행하십시오. 아래에 결과가 표시됩니다.

출력:

toggle 전:

전환 후: