Heim >Web-Frontend >CSS-Tutorial >Wie kann ich die Elementsichtbarkeit in jQuery über „.hide()' und „.show()' hinaus steuern?
Elementsichtbarkeit mit jQuery erreichen: Jenseits von .hide() und .show()
Die jQuery .hide() und .show( )-Methoden sind zu unverzichtbaren Werkzeugen für die Manipulation der Elementsichtbarkeit basierend auf CSS-Anzeigeeinstellungen geworden. Es kann jedoch vorkommen, dass die Anpassung der Anzeigeeigenschaft nicht ausreichend oder nicht erwünscht ist. Um diesem Bedarf gerecht zu werden, ist es möglich, benutzerdefinierte jQuery-Funktionen zu erstellen, die auf die Sichtbarkeitseigenschaft abzielen.
Benutzerdefinierte Sichtbarkeitsfunktionen erstellen
Um benutzerdefinierte Funktionen zu erstellen, die auf die Sichtbarkeit abzielen, haben wir kann die Methode .css() nutzen. Die folgenden Beispiele zeigen, wie Funktionen zum Ausblenden, Anzeigen und Umschalten der Sichtbarkeit definiert werden:
jQuery.fn.visible = function() { return this.css('visibility', 'visible'); }; jQuery.fn.invisible = function() { return this.css('visibility', 'hidden'); }; jQuery.fn.visibilityToggle = function() { return this.css('visibility', function(i, visibility) { return (visibility == 'visible') ? 'hidden' : 'visible'; }); };
Überladen der toggle()-Funktion
Wenn eine nahtlosere Integration mit Die vorhandene Funktion toggle() wird bevorzugt, es ist möglich, sie zu überladen, um die Sichtbarkeit zu verwalten:
!(function($) { var toggle = $.fn.toggle; $.fn.toggle = function() { var args = $.makeArray(arguments), lastArg = args.pop(); if (lastArg == 'visibility') { return this.visibilityToggle(); } return toggle.apply(this, arguments); }; })(jQuery);
Mit diesen benutzerdefinierten Funktionen oder Überladungstechniken können Sie kann jetzt mühelos die Sichtbarkeit von Elementen mithilfe der bekannten jQuery-Syntax verwalten, ohne auf CSS-Anzeigeeinstellungen zurückgreifen zu müssen.
Das obige ist der detaillierte Inhalt vonWie kann ich die Elementsichtbarkeit in jQuery über „.hide()' und „.show()' hinaus steuern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!