jQuery Event - Method toggle()

Panduan Referensi Event jQuery

Contoh

Tukarkan warna latar belakang yang berbeda:

($("p").toggle(),
  function(){
  ($("body").css("background-color","green");},
  function(){
  $("body").css("background-color","red");}
  function(){
  $("body").css("background-color","yellow");}
);

Coba Sendiri

Definisi dan Penggunaan

Metode toggle() digunakan untuk menautkan dua atau lebih fungsi penanggung jawab peristiwa, untuk merespon peristiwa klik berulang-ulang elemen yang dipilih.

Metode ini juga dapat digunakan untuk mengganti efek hide() dengan show() Metode.

Tautkan dua atau lebih fungsi ke peristiwa Toggle

Tukar antara dua atau lebih fungsi saat elemen yang ditentukan di klik.

Jika ditentukan dua atau lebih fungsi, metode toggle() akan menyalin semua fungsi. Contohnya, jika ada tiga fungsi, pertama kali klik akan memanggil fungsi pertama, kedua kali klik akan memanggil fungsi kedua, ketiga kali klik akan memanggil fungsi ketiga. Kali keempat klik akan memanggil fungsi pertama kembali, dan seterusnya.

Sintaks

$(selector).toggle(function1(),function2(),functionN(),...)

Coba Sendiri

Parameter Deskripsi
function1() Diperlukan. Fungsi yang dieksekusi saat elemen di klik untuk kedua kalinya.
function2() Diperlukan. Fungsi yang dieksekusi saat elemen di klik untuk pertama kalinya.
functionN(),... Opsional. Tentukan fungsi lain yang perlu ditukar.

Tukar Hide() dan Show()

Periksa setiap elemen apakah dapat dilihat.

Jika elemen sudah disembunyikan, jalankan show(). Jika elemen terlihat, jalankan hide(). Dengan cara ini dapat menciptakan efek penutupan.

Sintaks

$(selector).toggle(speed,callback)

Coba Sendiri

Parameter Deskripsi
speed

Opsional. Tentukan kecepatan efek hide/show. Default adalah "0".

Nilai yang mungkin:

  • mili detik (contoh 1500)
  • "slow"
  • "normal"
  • "fast"
callback

Opsional. Fungsi yang dieksekusi saat metode toggle() selesai.

Untuk belajar lebih banyak tentang callback, silakan kunjungi Tutorial Fungsi Callback。

Tampilkan atau Sembunyikan Elemen

Tentukan apakah hanya menampilkan atau menyembunyikan semua elemen yang cocok.

Sintaks

$(selector).toggle(switch)

Coba Sendiri

Parameter Deskripsi
switch

Diperlukan. Nilai boolean, menentukan toggle() apakah harus hanya menampilkan atau hanya menyembunyikan semua elemen yang dipilih.

  • true - Tampilkan elemen
  • false - Sembunyikan elemen

Panduan Referensi Event jQuery