Wie kann ich die Sichtbarkeitskontrolle von Elementen mithilfe von „visibility: versteckt' anstelle von .hide() von jQuery erreichen?

Sichtbarkeit erreichen: Alternativen zur .hide()-Methode von jQuery erkunden

Im Bereich der Frontend-Entwicklung hat sich die .hide()-Methode von jQuery bewährt erlangte Bekanntheit als bequeme Möglichkeit, die Sichtbarkeit von Elementen mithilfe von „display: none“ umzuschalten. Was aber, wenn Sie nach einer Lösung suchen, die die Eigenschaft „visibility: versteckt“ nutzt?

Glücklicherweise gibt es Möglichkeiten, die prägnante Syntax von .hide() nachzuahmen und gleichzeitig die Sichtbarkeit eines Elements mithilfe des bevorzugten CSS zu ändern Einstellung. Der Schlüssel liegt in der Erstellung benutzerdefinierter Plugins:

jQuery.fn.visible = function() {
    return this.css('visibility', 'visible');
};

jQuery.fn.invisible = function() {
    return this.css('visibility', 'hidden');
};

Diese Plugins bieten unkomplizierte Funktionen zum Festlegen der Sichtbarkeit auf „sichtbar“ oder „versteckt“.

Wenn Sie einen vielseitigeren Ansatz wünschen, sollten Sie darüber nachdenken Ändern der in jQuery integrierten Funktion toggle():

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

Diese Änderung erweitert toggle() um die Annahme von „Sichtbarkeit“ als Argument und ermöglicht so bequemes Umschalten zwischen sichtbaren und ausgeblendeten Zuständen.

Mit diesen Lösungen können Sie die Sichtbarkeit von Elementen einfach mithilfe der Eigenschaft „visibility:hidden“ verwalten und damit eine flexible Alternative zur .hide()-Methode von jQuery bieten.

Das obige ist der detaillierte Inhalt vonWie kann ich die Sichtbarkeitskontrolle von Elementen mithilfe von „visibility: versteckt' anstelle von .hide() von jQuery erreichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!