Bagaimanakah saya boleh menogol gaya CSS dengan jQuery apabila butang diklik?

jQuery Togol CSS

Soalan ini memerlukan togol JavaScript yang bertukar antara dua gaya CSS apabila pengguna mengklik butang. Klik pertama harus memaparkan menu dan melaraskan CSS, manakala klik kedua harus kembali kepada keadaan asal. Kod yang disediakan tidak mengambil kira togol CSS, jadi penyelesaian diperlukan.

Satu penyelesaian melibatkan penggunaan acara toggle(), khusus untuk versi jQuery di bawah 1.9. Begini caranya:

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

Kod ini menetapkan jejari sempadan elemen "user_button" kepada 0px pada klik pertama, menunjukkan menu "user_options" dengan berkesan dan menetapkannya semula kepada 5px pada klik kedua , mengembalikannya kepada keadaan asalnya.

Pendekatan alternatif yang disyorkan oleh alecwh melibatkan penggunaan kelas CSS untuk mengurus togol. Ini lebih bersih dan lebih boleh diselenggara. Versi yang diubah suai akan kelihatan seperti ini:

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

Kod ini menambahkan kelas "aktif" pada elemen "button_pengguna" pada klik pertama, yang mungkin menggayakannya secara berbeza dan mengalih keluarnya pada klik kedua, mengembalikannya kepada keadaan asalnya.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menogol gaya CSS dengan jQuery apabila butang diklik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!