L'équivalent de jQuery .hide() pour définir visibility: hidden

En jQuery, il y a .hide() et .show() méthodes qui définit le CSS display: none réglage.

Est-il une fonction équivalente qui serait le visibility: hidden paramètre?

Je sais que je peux utiliser .css() mais je préfère que certaines fonctions comme la .hide() ou donc. Merci.

Vous pouvez implémenter votre propre basée sur .toggle()
Je suis aussi un fan de jQuery toggleClass() méthode 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

InformationsquelleAutor TMS | 2012-03-08

409

Vous pourriez faire 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 l'original jQuery toggle(), 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.
- Alex, merci. Pourriez-vous utiliser .toggle() fonction de la place?
- Vous auriez à faire de l'ombre toggle() qui pourrait briser d'autres scripts. Si vous le vouliez, vous pourriez ajouter un argument supplémentaire à toggle() pour spécifier si visibility ou display doit être activée. Je venais d'utiliser l'outil de un dans mon dernier exemple, cependant. 🙂
- Pourriez-vous poster un exemple sur la façon de prendre en charge d'autres paramètres de show (vitesse, accélération, de rappel)?
- J'ai fourni un exemple de surcharge existant méthode jQuery. Vous devriez être en mesure de s'adapter à l'exemple de ce que vous désirez.
- Désolé alex, j'ai mal compris ce que .toogle() est ... Donc mon premier commentaire ici est faux. La première solution est la première à partir.
- Juste une remarque - ! n'est pas nécessaire si vous utilisez des parenthèses. !function(){}() ou (function(){})() faire pour une expression de fonction, en utilisant à la fois le superflu.
- Il est superflu si vous regardez de cette façon, mais il y a un but. Si c'est concaténé à un autre script avec un (function() { })() ou similaire, ASI ne seront pas coup de pied parce qu'il ressemble à un appel de fonction. Essayez de ceci, puis retirez le !.
- génie, mais l'utilisation de la bascule à la place..
- Qu'est-ce que l'ASI?
- Automatique Semi-colon d'Insertion. J'ai écrit un blog à ce sujet ici.
- Le premier bloc manque un tas de points-virgules, veuillez les ajouter. Il fonctionne de cette façon, mais est considérée comme un mauvais style.
- Bien sûr, mais n'oubliez pas que vous êtes libre de modifier la réponse. Je dirais que c'est une mauvaise pratique de mélanger les styles, je l'ai fait.
- cela fonctionne bien lorsque vous travaillez avec google maps, le panneau que gmaps charge doit être visible de sorte qu'il peut travailler sur la largeur/hauteur etc. si votre panneau est fixé initialement à display:none, la carte ne s'afficheront pas correctement. la définition de la visibilité:caché et les funcs ci-dessus me permet de gérer facilement l'état visible avec jquery. merci!!!!
- remplacent pas la charge 😉
- Ce n'est pas vraiment un terme bien défini, autant que je sache, donc il doit être bon de l'utiliser ici.
- jQuery a une construite dans toggleClass() méthode 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
- Ce n'est pas le basculement des classes, mais le basculement de la visibilité.
InformationsquelleAutor alex
98

Il n'y a pas un construit dans, mais vous pouvez écrire votre propre 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 ensuite appeler cela de la sorte:
```
$("#someElem").invisible();
$("#someOther").visible();
```
Voici un exemple de travail.
- +1 Vous n'avez pas besoin .each: jsfiddle.net/nGhjQ/2.
- Bon point, à la force de l'habitude. Merci. +1 pour alex réponse!
- Juste par curiosité, quel est le point dans l'emballage de ces deux fonctions dans le (function($) {...}(jQuery)); wrapper? Je n'ai jamais défini mes propres fonctions jQuery avant, j'ai toujours des fonctions définies dans droit en JavaScript.
- C'est juste les "meilleures pratiques" pour les plugins jQuery comme pour les docs. Il vous permet d'utiliser la $ identificateur de l'intérieur de la fonction, même si elle fait référence à quelque chose d'autre dans la portée parent.
- jQuery a une construite dans toggleClass() méthode 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
InformationsquelleAutor James Allardice
53

Un même moyen plus simple de faire cela est d'utiliser du jQuery toggleClass() méthode

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");
    });
});
```
- J'aime cette approche. C'est de moins en moins autonome, car elle exige de séparer la feuille de style, mais il permet de garder toutes les informations de style dans les feuilles de style qui est l'endroit où il doit appartenir. Si vous vouliez désactiver la visibilité que vous pouviez changer une css de la balise dans un seul endroit au lieu de changer tout votre code js.
- Pour ceux utilisant bootstrap, cette classe est appelée invisible.
InformationsquelleAutor Chaya Cooper
25

Si vous avez seulement besoin de la fonctionnalité standard de masquer uniquement avec visibility:hidden pour garder la mise en page actuelle, vous pouvez utiliser la fonction de rappel de cacher à modifier les règles css dans la balise. Masquer les docs en jquery

Un exemple :
```
$('#subs_selection_box').fadeOut('slow', function() {
      $(this).css({"visibility":"hidden"});
      $(this).css({"display":"block"});
});
```
Cela utiliser le calme habituel de l'animation pour cacher la div, mais après l'animation de finition vous définissez la visibilité de caché et d'un écran pour bloquer.

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

Je sais que tu ne voulais pas le $("#aa").(css) de la solution, mais vous n'avez pas précisé si c'était parce que en utilisant uniquement les css() la méthode que vous perdez de l'animation.

InformationsquelleAutor h3ct0r

Pur JS équivalent pour jQuery hide()/afficher() :

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 return el en raison de satisfaire interface fluide "design pattern".

Ici est exemple de travail.

Ci-dessous j'ai également fournir HAUTEMENT recommandé alternative, ce qui est probablement le plus "proche à la question" réponse:

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 ne mettre en œuvre jQuery "chacun" (en @JamesAllardice réponse) parce que nous utilisons un pur js ici.

Exemple de travail est ici.

InformationsquelleAutor Kamil Kiełczewski

Voici une mise en œuvre, ce qui fonctionne comme $.prop(name[,value]) ou $.attr(name[,value]) fonction. Si b de la variable est rempli, la visibilité est définie en fonction de cela, et this est retourné (permettant de continuer avec d'autres propriétés), sinon, elle retourne la visibilité de la valeur.

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;

InformationsquelleAutor Teet Kalm

Vous devez vous connecter pour publier un commentaire.