web-dev-qa-db-fra.com

jQuery bascule CSS?

Je souhaite basculer entre CSS afin que lorsqu'un utilisateur clique sur le bouton (#user_button) il affiche le menu (#user_options) et change le CSS, et lorsque l’utilisateur clique de nouveau dessus, il redevient normal. Jusqu'ici 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?

jquerycsstoggle
71
Edd Turtle

Pour les versions de jQuery inférieures à 1.9 (voir https://api.jquery.com/toggle-event ):

$('#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");
});
119
Ian Wetherbee

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;
})
65
Ties

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.

4
alecwh

La meilleure option serait de définir un style de classe en CSS comme .showMenu et .hideMenu avec les différents styles à l'intérieur. Ensuite, vous pouvez faire quelque chose comme

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

Le code initial doit avoir borderBottomLeftRadius: 0px

$('#user_button').toggle().css('borderBottomLeftRadius','+5px');
1
Mohamed CHIBANI