Heim >Web-Frontend >CSS-Tutorial >Wie kann ich die Funktionalität von „.hide()' von jQuery erreichen, ohne die Elementabmessungen zu beeinträchtigen?

Wie kann ich die Funktionalität von „.hide()' von jQuery erreichen, ohne die Elementabmessungen zu beeinträchtigen?

Linda Hamilton
Linda HamiltonOriginal
2024-11-29 07:00:13497Durchsuche

How Can I Achieve the Functionality of jQuery's `.hide()` Without Affecting Element Dimensions?

Alternativen zu jQuerys .hide() für Sichtbarkeit finden: Versteckt

In jQuery haben Entwickler die Möglichkeit, .hide() und zu verwenden .show(), um die Sichtbarkeit von Elementen zu manipulieren, indem die CSS-Anzeigeeigenschaft auf „Keine“ gesetzt wird. Wenn jedoch die Notwendigkeit besteht, die Sichtbarkeit von Elementen auf „Ausgeblendet“ zu setzen, ohne die Abmessungen des Elements zu ändern, kann das Finden einer entsprechenden Funktion wie .hide() eine Herausforderung darstellen.

Benutzerdefinierte Plugin-Entwicklung

Ein Ansatz besteht darin, ein benutzerdefiniertes jQuery-Plugin zu erstellen, das die gewünschte Funktionalität bereitstellt. Das folgende Codebeispiel demonstriert die Erstellung von drei Plugins:

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

Mit diesen Plugins können Sie die erweiterten Funktionen „Visibility()“, „Unsichtbar()“ und „VisibilityToggle()“ verwenden, um die Sichtbarkeit von Elementen direkt zu steuern, ohne sie zu ändern physische Größe.

Überladen der ursprünglichen jQuery-toggle()-Funktion

Für diejenigen, die einen vertrauteren Ansatz bevorzugen, Es ist möglich, die vorhandene jQuery-Funktion toggle() zu überladen, um das Umschalten der Sichtbarkeit zu steuern. Eine Methode ist:

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

Dieser Ansatz wird jedoch nicht empfohlen, da er die ursprüngliche toggle()-Funktion ändert.

Letztendlich unabhängig davon, ob Sie Ihr eigenes Plugin erstellen oder den Toggle überladen möchten ()-Funktion bieten die bereitgestellten Lösungen eine äquivalente Funktionalität wie .hide() von jQuery zum Ändern der Elementsichtbarkeit über die Sichtbarkeitseigenschaft.

Das obige ist der detaillierte Inhalt vonWie kann ich die Funktionalität von „.hide()' von jQuery erreichen, ohne die Elementabmessungen zu beeinträchtigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn