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
Freigeben: 2024-11-29 07:00:13
Original
503 Leute haben es durchsucht

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';
    });
};
Nach dem Login kopieren

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);
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage