Wie kann ich CSS-Stile mit jQuery umschalten, wenn auf eine Schaltfläche geklickt wird?

jQuery Toggle CSS

Diese Frage erfordert einen JavaScript-Toggle, der zwischen zwei CSS-Stilen wechselt, wenn ein Benutzer auf eine Schaltfläche klickt. Der erste Klick sollte ein Menü anzeigen und das CSS anpassen, während ein zweiter Klick zum ursprünglichen Zustand zurückkehren sollte. Der bereitgestellte Code berücksichtigt das CSS-Umschalten nicht, daher ist eine Lösung erforderlich.

Eine Lösung besteht darin, das toggle()-Ereignis zu verwenden, insbesondere für jQuery-Versionen unter 1.9. So funktioniert es:

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

Dieser Code setzt den Rahmenradius des „user_button“-Elements beim ersten Klick auf 0 Pixel, wodurch effektiv das Menü „user_options“ angezeigt wird, und setzt ihn beim zweiten Klick auf 5 Pixel zurück , wodurch es in seinen ursprünglichen Zustand zurückversetzt wird.

Ein alternativer Ansatz, der von alecwh empfohlen wird, besteht darin, CSS-Klassen zu verwenden, um das Umschalten zu verwalten. Das ist sauberer und wartungsfreundlicher. Eine modifizierte Version würde so aussehen:

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

Dieser Code fügt beim ersten Klick die Klasse „active“ zum „user_button“-Element hinzu, wodurch sie vermutlich anders formatiert wird, und entfernt sie beim zweiten Klick. es in seinen ursprünglichen Zustand zurückversetzen.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Stile mit jQuery umschalten, wenn auf eine Schaltfläche geklickt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!