jQuery CSS umschalten?

74

Ich möchte zwischen CSS wechseln. Wenn ein Benutzer auf die Schaltfläche ( #user_button) klickt , wird das Menü ( #user_options) angezeigt und das CSS geändert. Wenn der Benutzer erneut darauf klickt, wird wieder normal. Bisher 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?

jquery css toggle Edd Turtle
quelle
2
Können Sie Ihre HTML / CSS-Snippets veröffentlichen?
Mike Robinson

Antworten:

125

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 das CSS direkt festzulegen. Schauen Sie sich die oben genannten Methoden addClass und removeClass an.

$('#user_button').toggle(function () {
    $("#user_button").addClass("active");
}, function () {
    $("#user_button").removeClass("active");
});
Ian Wetherbee
quelle
7
Dies funktioniert nicht mehr, da diese Methode in jQuery 1.8 veraltet und in jQuery 1.9 entfernt wurde. Siehe api.jquery.com/toggle-event
binaryfunt
Aber was ist, wenn wir einen Übergangseffekt haben? In diesem Fall wird der Übergangseffekt nicht angewendet, oder?
Pedram Marandi
69

Ich würde die toggleClass- Funktion 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;
})
Krawatten
quelle
Das würde ich auch tun. Weniger Styling in Ihrem JS dann
David Yell
1
Warum ist das nicht die Antwort?
Levi Botelho
@Ties - Es lohnt sich auf jeden Fall, der Erste zu sein, der etwas veröffentlicht. Es ist eine Schande, weil es sich gewaltsam negativ auf die Qualität der Antworten auswirkt. Besser eine schnelle Antwort als eine gründliche.
Levi Botelho
Beides sind richtige Antworten, hängt nur von der Methode ab, die Sie verwenden möchten. Ich mag dieses aber, danke
Zach
Jeder, der das durchliest. Bitte erwägen Sie, diese Antwort zu verwenden, bevor Sie die für die Lösung markierte Antwort verwenden.
Joseph Casey
4

Möglicherweise möchten Sie die Befehle .addClass und .removeClass von jQuery verwenden und zwei verschiedene Klassen für die Status erstellen. Für mich wäre dies die beste Vorgehensweise.

Alecwh
quelle
3
toggleClass ist äquivalent zu diesen, es sei denn, Sie möchten eine andere Klasse entfernen, als Sie aus irgendeinem Grund hinzufügen
Zach
2

Der Initialcode muss borderBottomLeftRadius: 0px haben

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

Die beste Option wäre, einen Klassenstil in CSS wie .showMenuund .hideMenumit den verschiedenen darin enthaltenen Stilen festzulegen. Dann kannst du so etwas machen

$("#user_button").addClass("showMenu");
Munzilla
quelle
0

Sie können dies tun, indem Sie den folgenden Status beibehalten:

$('#user_button').on('click',function(){
    if($(this).attr('data-click-state') == 1) {
        $(this).attr('data-click-state', 0);
        $(this).css('background-color', 'red')
      }
    else {
      $(this).attr('data-click-state', 1);
      $(this).css('background-color', 'orange')
    }
  });

Nehmen Sie eine Referenz aus dem Codepen-Beispiel

khem raj regmi
quelle