Penggunaan Kaedah toggleClass dalam jQuery

Terdapat juga kaedah yang berguna iaitu toggleClass, yang akan menambah kelas yang ditentukan jika ia tiada, dan mengalihkelaskannya jika ia ada. Ia mungkin diperlukan supaya dengan klik pada butang yang sama, perubahan berkala berlaku pada elemen halaman.

Mari kita lihat kaedah ini dengan contoh. Katakan kita mempunyai gaya CSS berikut:

.red {
	color: red;
}
	
.zzz {
	font-style: italic;
}

Juga terdapat perenggan dengan kelas zzz:

<p class="zzz" id="test">teks</p>
<button>klik</button>

Sebagai contoh, mari kita buat supaya pada klik pertama pada butang, kelas red ditambah kepada elemen, yang menambah warna merah, dan pada klik berikutnya - kelas ini akan dialihkeluar dan warna merah akan hilang. Jika butang ditekan sekali lagi - semuanya akan berulang.

Cuba jalankan kod berikut dan lihat sendiri (kelas zzz menyerlahkan teks dengan cetakan condong, untuk menunjukkan bahawa toggleClass tidak akan mengganggu kelas lain berfungsi):

$('button').click(function() {
	$('#test').toggleClass('red');
});

Selepas klik pertama, kod HTML akan kelihatan seperti ini (kelas red ditambah):

<p class="zzz red" id="test">teks</p>
<button>klik</button>

Dan selepas klik kedua - seperti ini (kelas red hilang):

<p class="zzz" id="test">teks</p>
<button>klik</button>

Tambahkan kelas www kepada semua li jika ia tiada, dan alihkelaskannya jika ada.