Bagaimana untuk Togol Kelas CSS dengan Kaedah toggle() jQuery?

Bagaimanakah untuk Togol Kelas CSS dengan jQuery?

Apabila bekerja dengan antara muka pengguna, selalunya perlu menukar antara gaya CSS yang berbeza berdasarkan pengguna tindakan. Satu senario biasa ialah apabila butang klik mendedahkan menu tersembunyi dan mengubah suai penampilan butang. Dalam artikel ini, kami akan meneroka cara untuk mencapai ini menggunakan kaedah toggle() jQuery.

Pernyataan Masalah

Andaikan kita mempunyai butang dan menu tersembunyi dalam Kod HTML:

<button>

Kami mahu menogol keterlihatan menu dan menukar jejari sempadan butang apabila butang diklik.

Percubaan Awal

Kod jQuery berikut menunjukkan percubaan awal kami untuk menogol menu dan CSS:

$('#user_button').click(function () {
    $('#user_options').toggle();
    $("#user_button").css({
        borderBottomLeftRadius: '0px',
        borderBottomRightRadius: '0px'
    });
    return false;
});

Walau bagaimanapun, kod ini hanya berfungsi untuk klik pertama. Untuk mengendalikan fungsi togol dengan betul, kita perlu menentukan dua fungsi berbeza untuk menghidupkan dan mematikan.

Peristiwa Togol jQuery

Untuk versi jQuery yang lebih rendah daripada 1.9, kita boleh gunakan acara toggle() untuk mencapai ini:

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

Kod ini menetapkan jejari sempadan yang berbeza untuk butang bergantung pada sama ada ia berada dalam keadaan "hidup" atau "mati".

Menggunakan Kelas

Pendekatan alternatif ialah menggunakan kelas CSS untuk mengendalikan perubahan visual :

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

Kaedah ini membolehkan kami mentakrifkan perubahan CSS dengan cara yang lebih teratur dalam CSS kami fail.

Dengan menggunakan teknik ini, kami boleh menukar gaya CSS secara elegan berdasarkan tindakan pengguna, meningkatkan interaktiviti dan kebolehgunaan aplikasi web kami.

Atas ialah kandungan terperinci Bagaimana untuk Togol Kelas CSS dengan Kaedah toggle() jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!