Bagaimana untuk Togol Negeri CSS dengan Klik Butang jQuery?

Togol Keadaan CSS dengan Klik Butang jQuery

Apabila membina aplikasi web interaktif, selalunya perlu untuk menogol antara keadaan CSS yang berbeza berdasarkan input pengguna . Dalam senario ini, anda ingin memaparkan menu apabila butang diklik dan mengubah penampilannya.

Penyelesaian:

Kod yang disediakan menggunakan kaedah togol untuk menunjukkan atau menyembunyikan menu dengan ID "user_options" apabila butang dengan ID "user_button" diklik. Walau bagaimanapun, ia tidak mempunyai keupayaan untuk menogol sifat CSS.

Untuk menangani perkara ini, anda boleh sama ada menggunakan kaedah togol dengan fungsi panggil balik atau menggunakan kaedah addClass dan removeClass jQuery.

Menggunakan togol dengan Fungsi Panggilan Balik (jQuery < 1.9):

$('#user_button').toggle(function() {
  $("#user_button").css({borderBottomLeftRadius: "0px"});
}, function() {
  $("#user_button").css({borderBottomLeftRadius: "5px"});
});

Kod ini mentakrifkan dua fungsi panggil balik: satu untuk apabila butang diklik pada mulanya (kesan gelongsor) dan satu lagi untuk apabila ia diklik semula ( kembali kepada keadaan asal).

Sebagai alternatif, Menggunakan Kelas:

$('#user_button').toggle(function() {
  $("#user_button").addClass("active");
}, function() {
  $("#user_button").removeClass("active");
});

Di sini, bukannya menukar terus sifat CSS, anda menambah dan mengalih keluar kelas CSS (" aktif" dalam kes ini) untuk menogol gaya yang diingini. Kaedah ini lebih fleksibel dan mengelakkan penggunaan nilai CSS berkod keras.

Dengan melaksanakan salah satu daripada penyelesaian ini, anda boleh mencapai kefungsian yang diingini untuk menogol paparan dan penampilan CSS elemen menu sebagai tindak balas kepada butang klik.

Atas ialah kandungan terperinci Bagaimana untuk Togol Negeri CSS dengan Klik Butang jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!