Wie kann ich jQuery-Funktionen erstellen, um die CSS-Sichtbarkeit zu steuern?

Erstellen von jQuery-Funktionen zur Manipulation der CSS-Sichtbarkeit

In jQuery legen die Methoden .hide() und .show() bequem die CSS-Anzeige fest Eigenschaft auf none bzw. block setzen. Gibt es jedoch eine ähnliche Funktion, die die CSS-Sichtbarkeitseigenschaft explizit auf „versteckt“ setzt?

Lösung

Während jQuery keine native Funktion speziell zum Festlegen der Sichtbarkeit bereitstellt, Sie können ganz einfach Ihre eigenen erstellen.

Benutzerdefinierte Sichtbarkeit erstellen Funktionen:

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';
    });
};

Beispielverwendung:

$('#element').visible(); // Makes element visible
$('#element').invisible(); // Makes element invisible
$('#element').visibilityToggle(); // Toggles visibility

Überladung der nativen toggle()-Funktion (nicht empfohlen):

!(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);

Dadurch können Sie toggle('visibility') als Verknüpfung zum Umschalten der Sichtbarkeit verwenden. Dies wird jedoch im Allgemeinen nicht empfohlen, da es das Standardverhalten von toggle() in anderen Kontexten außer Kraft setzen kann.

Interaktive jsFiddle-Demonstration:

https://jsfiddle. net/

Das obige ist der detaillierte Inhalt vonWie kann ich jQuery-Funktionen erstellen, um die CSS-Sichtbarkeit zu steuern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!