it-swarm.com.de

jQuery CSS umschalten?

Ich möchte zwischen CSS wechseln, wenn ein Benutzer auf die Schaltfläche klickt (#user_button) zeigt das Menü (#user_options) und ändert das CSS, und wenn der Benutzer erneut darauf klickt, wird es wieder normal. Soweit ist das alles was ich habe:

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

Kann jemand helfen?

71
Edd Turtle

Für jQuery-Versionen unter 1.9 (siehe https://api.jquery.com/toggle-event ):

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

In diesem Fall ist es besser, Klassen zu verwenden, als die CSS direkt festzulegen. Schauen Sie sich die erwähnten Methoden addClass und removeClass an.

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

Ich würde die Funktion toggleClass in jQuery verwenden und das CSS für die Klasse definieren, z.

/* 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

Sie können die Befehle . AddClass und . RemoveClass von jQuery verwenden und zwei verschiedene Klassen für die Status erstellen. Dies wäre für mich die beste Vorgehensweise.

4
alecwh

Die beste Option wäre, einen Klassenstil in CSS wie .showMenu Und .hideMenu Mit den verschiedenen darin enthaltenen Stilen festzulegen. Dann kannst du sowas machen

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

Der initiale Code muss borderBottomLeftRadius: 0px haben

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