jQuery bascule CSS?

Question

Je souhaite basculer entre les CSS. Ainsi, lorsqu'un utilisateur clique sur le bouton (#user_button), il affiche le menu (#user_options) et modifie le CSS. Lorsque l'utilisateur clique à nouveau dessus, il redevient normal. Jusqu'à présent, c'est tout ce que j'ai:

   $('#user_button').click(function() {

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

Quelqu'un peut aider?

Answer 1

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

Dans ce cas, il serait préférable d’utiliser des classes plutôt que de définir le fichier css directement. Examinez les méthodes addClass et removeClass déjà mentionnées.

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

Answer 2

Je voudrais utiliser la fonction toggleClass dans jQuery et définir le CSS à la classe par exemple

 /* start of css */
#user_button.active {
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px; /* user-agent specific */
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px; /* etc... */
}
/* start of js */
$('#user_button').click(function() {
    $('#user_options').toggle();
    $(this).toggleClass('active');
    return false;
})
 

Answer 3

Vous voudrez peut-être utiliser les commandes .addClass et .removeClass de jQuery et créer deux classes différentes pour les états. Pour moi, ce serait la meilleure façon de le faire.

Answer 4

La meilleure option serait de définir un style de classe dans CSS tel que .showMenu et .hideMenu avec les différents styles qui y sont contenus. Ensuite, vous pouvez faire quelque chose comme

 $("#user_button").addClass("showMenu");