Wie schalte ich CSS-Status mit einem jQuery-Button-Klick um?

CSS-Status mit jQuery-Schaltflächenklick umschalten

Beim Erstellen interaktiver Webanwendungen ist es oft erforderlich, basierend auf Benutzereingaben zwischen verschiedenen CSS-Status umzuschalten . In diesem Szenario möchten Sie beim Klicken auf eine Schaltfläche ein Menü anzeigen und dessen Erscheinungsbild ändern.

Lösung:

Der bereitgestellte Code verwendet die Umschaltmethode, um das anzuzeigen oder auszublenden Menü mit der ID „user_options“, wenn auf die Schaltfläche mit der ID „user_button“ geklickt wird. Es fehlt jedoch die Möglichkeit, die CSS-Eigenschaften umzuschalten.

Um dieses Problem zu beheben, können Sie entweder die Toggle-Methode mit Rückruffunktionen verwenden oder die Methoden addClass und removeClass von jQuery verwenden.

Using Umschalten mit Callback-Funktionen (jQuery < 1.9):

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

Dieser Code definiert zwei Callback-Funktionen: eine für den ersten Klick auf die Schaltfläche (Gleiteffekt) und eine für den erneuten Klick auf die Schaltfläche ( zum ursprünglichen Zustand zurückkehren).

Alternativ Klassen verwenden:

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

Anstatt die CSS-Eigenschaften direkt zu ändern, fügen Sie hier CSS-Klassen hinzu und entfernen sie (" in diesem Fall aktiv), um die gewünschten Stile umzuschalten. Diese Methode ist flexibler und vermeidet die Verwendung fest codierter CSS-Werte.

Durch die Implementierung einer dieser Lösungen können Sie die gewünschte Funktionalität des Umschaltens der Anzeige und des CSS-Erscheinungsbilds des Menüelements als Reaktion auf die Schaltfläche erreichen Klicks.

Das obige ist der detaillierte Inhalt vonWie schalte ich CSS-Status mit einem jQuery-Button-Klick um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!