.toggleClass() w jQuery

Słownik kwalifikacji INF.04 - Projektowanie, programowanie i testowanie aplikacji

Czym jest .toggleClass() w jQuery?

.toggleClass() to metoda biblioteki jQuery, która służy do naprzemiennego dodawania i usuwania klasy CSS z wybranego elementu HTML.

Jeżeli element nie ma podanej klasy, metoda ją doda. Jeżeli element już ją ma, metoda ją usunie.

Składnia

$(selector).toggleClass('nazwa-klasy');
  • selector wskazuje element lub elementy HTML,
  • 'nazwa-klasy' to klasa CSS, która ma być przełączana.

Przykład

HTML:

<button id='przycisk'>Zmień wygląd</button>
<p id='tekst'>Przykładowy tekst</p>

CSS:

.aktywny {
  color: red;
  font-weight: bold;
}

JavaScript/jQuery:

$('#przycisk').click(function() {
  $('#tekst').toggleClass('aktywny');
});

Po każdym kliknięciu przycisku klasa aktywny zostanie dodana albo usunięta z akapitu.

Do czego się przydaje?

Metoda .toggleClass() jest często używana do:

  • pokazywania i ukrywania elementów przez zmianę klasy CSS,
  • zmiany wyglądu aktywnego przycisku lub menu,
  • przełączania trybu jasnego i ciemnego,
  • obsługi prostych efektów interfejsu użytkownika.

Ważne na egzaminie

W podstawowym jQuery metodą do naprzemiennego dodawania i usuwania klasy jest .toggleClass(). Metody .changeClass() i .bingClass() nie są standardowymi metodami jQuery.