Maison > interface Web > tutoriel CSS > Comment puis-je obtenir la fonctionnalité de « .hide() » de jQuery sans affecter les dimensions des éléments ?

Comment puis-je obtenir la fonctionnalité de « .hide() » de jQuery sans affecter les dimensions des éléments ?

Linda Hamilton
Libérer: 2024-11-29 07:00:13
original
546 Les gens l'ont consulté

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

Trouver des alternatives au .hide() de jQuery pour la visibilité : cachée

Dans jQuery, les développeurs ont la commodité d'utiliser .hide() et .show() pour manipuler la visibilité des éléments en définissant la propriété d'affichage CSS sur none. Cependant, lorsqu'il est nécessaire de définir la visibilité d'un élément sur caché sans modifier les dimensions de l'élément, trouver une fonction équivalente telle que .hide() peut poser un défi.

Développement de plugins personnalisés

Une approche consiste à créer un plugin jQuery personnalisé qui fournit la fonctionnalité souhaitée. L'exemple de code suivant illustre la création de trois 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';
    });
};
Copier après la connexion

Avec ces plugins, vous pouvez utiliser les fonctions étendues visible(), invisible() et visibilitéToggle() pour contrôler directement la visibilité des éléments sans modifier leur taille physique.

Surcharge de la fonction jQuery toggle() originale

Pour ceux qui préfèrent une approche plus familière, il est possible de surcharger la fonction jQuery toggle() existante pour gérer le basculement de visibilité. Une méthode est :

!(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);
Copier après la connexion

Cependant, cette approche n'est pas recommandée car elle modifie la fonction toggle() d'origine.

En fin de compte, que vous choisissiez de créer votre propre plugin ou de surcharger la bascule (), les solutions fournies offrent des fonctionnalités équivalentes à .hide() de jQuery pour modifier la visibilité des éléments via la propriété de visibilité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal