Rumah > hujung hadapan web > tutorial js > Contoh menggunakan fungsi toggle() dalam jQuery_jquery

Contoh menggunakan fungsi toggle() dalam jQuery_jquery

WBOY
Lepaskan: 2016-05-16 16:03:29
asal
1250 orang telah melayarinya

Saya menemui contoh menarik hari ini dan merakamnya.

Menu peringkat pertama mempunyai menu peringkat kedua di dalam Menu peringkat kedua memautkan elemen halaman melalui titik utama. Kesan yang diingini ialah apabila sauh diklik, halaman dipautkan ke sauh yang sepadan, dan menu tahap kedua disembunyikan Apabila menu tahap pertama diklik semula, pelaksanaan diteruskan. .

Saya mencuba banyak kaedah tetapi ia tidak berjaya Akhirnya, saya menyedarinya dengan membaca fungsi togol jquery.

    //这样写可以
    $(".nav").toggle(function(){
      $(".content").slideToggle();
    });
    //这样写不可以
    $(".nav").toggle(function(){
     $(".content").slideDown();
   },function(){
     $(".content").slideUp();
   });
   //这样写也可以
    $(".nav").click(function(){
      $(".content").toggle("slow");
    });

Salin selepas log masuk

Dilampirkan arahan untuk menggunakan toggle()

togol(fn,fn)

Tukar fungsi untuk dipanggil pada setiap klik.
Jika elemen padanan diklik, fungsi pertama yang ditentukan akan dicetuskan, dan apabila elemen yang sama diklik semula, fungsi kedua yang ditentukan akan dicetuskan. Setiap klik seterusnya mengulangi panggilan ke dua fungsi ini secara bergilir-gilir.

Boleh dipadam menggunakan unbind("klik").

Nilai pulangan
jQuery

Parameter

fn (Fungsi): Fungsi yang akan dilaksanakan apabila klik bernombor ganjil dibuat.

fn (Fungsi): Fungsi yang akan dilaksanakan apabila klik bernombor genap dibuat.

Contoh

Tukar kelas ke meja

Kod jQuery:

$("td").toggle( 
function () { 
$(this).addClass("selected"); 
}, 
function () { 
$(this).removeClass("selected"); 
} 
);

Salin selepas log masuk

Tambahan: togol hanya berfungsi apabila diklik, tuding hanyalah peristiwa apabila tetikus bergerak masuk dan keluar, dan tiada kaitan dengan klik. Kedua-duanya boleh digunakan bersama

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan