Comment puis-je basculer les styles CSS avec jQuery lorsqu'un bouton est cliqué ?

jQuery Toggle CSS

Cette question nécessite une bascule JavaScript qui bascule entre deux styles CSS lorsqu'un utilisateur clique sur un bouton. Le premier clic doit afficher un menu et ajuster le CSS, tandis qu'un deuxième clic doit revenir à l'état d'origine. Le code fourni ne prend pas en compte la bascule CSS, une solution est donc nécessaire.

Une solution consiste à utiliser l'événement toggle(), spécifiquement pour les versions de jQuery inférieures à 1.9. Voici comment cela fonctionne :

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

Ce code définit le rayon de bordure de l'élément "user_button" à 0px au premier clic, affichant efficacement le menu "user_options", et le réinitialise à 5px au deuxième clic. , le ramenant à son état d'origine.

Une approche alternative recommandée par alecwh consiste à utiliser des classes CSS pour gérer la bascule. C’est plus propre et plus maintenable. Une version modifiée ressemblerait à ceci :

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

Ce code ajoute la classe "active" à l'élément "user_button" au premier clic, ce qui le stylise différemment, et le supprime au deuxième clic, le ramener à son état initial.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!