Équivalent de jQuery .hide () pour définir la visibilité: caché


341

Dans jQuery, il existe des méthodes .hide()et .show()qui définissent le display: noneparamètre CSS .

Existe-t-il une fonction équivalente qui définirait le visibility: hiddenparamètre?

Je sais que je peux utiliser, .css()mais je préfère une fonction similaire .hide(). Merci.


2
Vous pouvez implémenter le vôtre en fonction de.toggle()
zerkms

Je suis aussi un fan de la méthode toggleClass () de jQuery pour cela :) jqueryui.com/toggleClass N'hésitez pas à consulter l'exemple que j'ai partagé dans ma réponse ci-dessous stackoverflow.com/a/14632687/1056713
Chaya Cooper

Réponses:


427

Vous pouvez créer vos propres 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';
    });
};

Si vous voulez surcharger le jQuery d'origine toggle(), ce que je ne recommande pas ...

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

jsFiddle .


@Tomas Vous devrez observer toggle()ce qui pourrait casser d'autres scripts. Si vous le souhaitez, vous pouvez ajouter un argument supplémentaire à toggle()pour spécifier s'il faut visibilityou displaynon basculer. J'utiliserais juste celui personnalisé dans mon dernier exemple, cependant. :)
alex

Pourriez-vous publier un exemple sur la façon de prendre en charge des paramètres supplémentaires de show(vitesse, accélération, rappel)?
georg

11
C'est superflu si vous le regardez de cette façon, mais il y a un but. Si cela est concaténé à un autre script avec un (function() { })()ou similaire, ASI ne démarre pas car il ressemble à une invocation de fonction. Essayez ceci , puis retirez le !.
alex

1
@NoBugs Insertion automatique du point-virgule. J'ai écrit un blog à ce sujet ici.
alex

1
@VishalSakaria Ce n'est pas vraiment un terme bien défini pour autant que je sache, donc ça devrait être correct de l'utiliser ici.
alex

103

Il n'y en a pas de intégré, mais vous pouvez écrire le vôtre assez facilement:

(function($) {
    $.fn.invisible = function() {
        return this.each(function() {
            $(this).css("visibility", "hidden");
        });
    };
    $.fn.visible = function() {
        return this.each(function() {
            $(this).css("visibility", "visible");
        });
    };
}(jQuery));

Vous pouvez alors appeler cela comme ceci:

$("#someElem").invisible();
$("#someOther").visible();

Voici un exemple de travail .


1
Bon point, juste une force d'habitude. Merci. +1 à la réponse d'Alex!
James Allardice

Juste curieux, quel est l'intérêt d'envelopper ces deux fonctions dans l' (function($) {...}(jQuery));encapsuleur? Je n'ai jamais défini mes propres fonctions dans jQuery auparavant, j'ai toujours juste défini des fonctions en JavaScript simple.
VoidKing

2
@VoidKing - C'est juste la "meilleure pratique" pour les plugins jQuery selon la documentation. Il vous permet d'utiliser l' $identifiant à l'intérieur de la fonction, même s'il fait référence à autre chose dans la portée parent.
James Allardice

jQuery a en fait une méthode intégrée toggleClass () pour cela :) jqueryui.com/toggleClass N'hésitez pas à consulter l'exemple que j'ai partagé dans ma réponse ci-dessous stackoverflow.com/a/14632687/1056713
Chaya Cooper

55

Une façon encore plus simple de le faire est d'utiliser la méthode toggleClass () de jQuery

CSS

.newClass{visibility: hidden}

HTML

<a href="#" class=trigger>Trigger Element </a>
<div class="hidden_element">Some Content</div>

JS

$(document).ready(function(){
    $(".trigger").click(function(){
        $(".hidden_element").toggleClass("newClass");
    });
});

1
J'aime cette approche. Il est moins autonome car il nécessite une feuille de style distincte, mais il permet de conserver toutes les informations de style dans les feuilles de style, où il doit appartenir. Si vous souhaitez désactiver la visibilité, vous pouvez modifier une balise css au même endroit au lieu de modifier tout votre code js.
vaughan

19
Pour ceux qui utilisent le bootstrap, cette classe est appelée invisible.
user239558

25

Si vous n'avez besoin que de la fonctionnalité standard de masquer uniquement avec visibilité: masqué pour conserver la disposition actuelle, vous pouvez utiliser la fonction de rappel de masquer pour modifier le CSS dans la balise. Masquer les documents dans jquery

Un exemple :

$('#subs_selection_box').fadeOut('slow', function() {
      $(this).css({"visibility":"hidden"});
      $(this).css({"display":"block"});
});

Cela utilisera l'animation cool normale pour masquer le div, mais après la fin de l'animation, vous définissez la visibilité sur caché et l'affichage sur bloquer.

Un exemple: http://jsfiddle.net/bTkKG/1/

Je sais que vous ne vouliez pas de la solution $ ("# aa"). Css (), mais vous n'avez pas spécifié si c'était parce qu'en utilisant uniquement la méthode css () vous perdiez l'animation.


2

Voici une implémentation, ce qui fonctionne $.prop(name[,value])ou $.attr(name[,value])fonctionne. Si la bvariable est remplie, la visibilité est définie en fonction de cela et thisest renvoyée (permettant de continuer avec d'autres propriétés), sinon elle renvoie une valeur de visibilité.

jQuery.fn.visible = function (b) {
    if(b === undefined)
        return this.css('visibility')=="visible";
    else {
        this.css('visibility', b? 'visible' : 'hidden');
        return this;
    }
}

Exemple:

$("#result").visible(true).on('click',someFunction);
if($("#result").visible())
    do_something;

1

Équivalent JS pur pour jQuery hide () / show ():

function hide(el) {
    el.style.visibility = 'hidden';    
    return el;
}

function show(el) {
    el.style.visibility = 'visible';    
    return el;
}

hide(document.querySelector(".test"));
// hide($('.test')[0])   // usage with jQuery

Nous utilisons en return elraison de satisfaire l' interface fluide "desing pattern".

Voici un exemple de travail .


Ci-dessous, je propose également une alternative HAUTEMENT déconseillée , qui est cependant probablement une réponse plus "proche de la question":

HTMLElement.prototype.hide = function() {
    this.style.visibility = 'hidden';  
    return this;
}

HTMLElement.prototype.show = function() {
    this.style.visibility = 'visible';  
    return this;
}

document.querySelector(".test1").hide();
// $('.test1')[0].hide();   // usage with jQuery

bien sûr, cela n'implémente pas jQuery 'each' (donné dans la réponse @JamesAllardice ) car nous utilisons ici des js purs.

Un exemple de travail est ici .

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.