Comment basculer les états CSS avec un clic sur un bouton jQuery ?

Basculer l'état CSS avec le bouton jQuery en cliquant

Lors de la création d'applications Web interactives, il est souvent nécessaire de basculer entre différents états CSS en fonction de la saisie de l'utilisateur. . Dans ce scénario, vous souhaitez afficher un menu lors d'un clic sur un bouton et modifier son apparence.

Solution :

Le code fourni utilise la méthode toggle pour afficher ou masquer le menu avec l'ID "user_options" lorsque le bouton avec l'ID "user_button" est cliqué. Cependant, il n'a pas la possibilité de basculer les propriétés CSS.

Pour résoudre ce problème, vous pouvez soit utiliser la méthode toggle avec des fonctions de rappel, soit utiliser les méthodes addClass et removeClass de jQuery.

Utilisation basculer avec les fonctions de rappel (jQuery < 1.9) :

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

Ce code définit deux fonctions de rappel : une pour le moment où le bouton est initialement cliqué (effet coulissant) et une autre pour lorsqu'il est à nouveau cliqué ( revenir à l'état d'origine).

Alternativement, utiliser des classes :

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

Ici, au lieu de modifier directement les propriétés CSS, vous ajoutez et supprimez des classes CSS (" actif" dans ce cas) pour basculer entre les styles souhaités. Cette méthode est plus flexible et évite l'utilisation de valeurs CSS codées en dur.

En implémentant l'une ou l'autre de ces solutions, vous pouvez obtenir la fonctionnalité souhaitée consistant à basculer l'affichage et l'apparence CSS de l'élément de menu en réponse au bouton clics.

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!