web-dev-qa-db-fra.com

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

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

Existe-t-il une fonction équivalente permettant de définir le paramètre visibility: hidden? 

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

javascriptjquerycssvisibility
305
TMS

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 original 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 .

389
alex

Il n’en existe pas, 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 .

95
James Allardice

Une méthode encore plus simple consiste à 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");
    });
});
50
Chaya Cooper

Si vous avez uniquement besoin de la fonctionnalité standard de masquer uniquement avec visibilité: masqué pour conserver la mise en page actuelle, vous pouvez utiliser la fonction de rappel de masquer pour modifier le css dans la balise. Masquer la documentation 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 la div, mais une fois l'animation terminée, vous définissez la visibilité sur masqué et l'affichage sur bloqué.

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

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

21
h3ct0r

Voici une implémentation, qui fonctionne comme la fonction $.prop(name[,value]) ou $.attr(name[,value]). Si la variable b est remplie, la visibilité est définie en conséquence et this est renvoyé (ce qui permet de continuer avec d'autres propriétés), sinon elle renvoie la 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;
0
Teet Kalm

Pure JS équivalent 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 return el due pour satisfaire interface fluide "modèle de desing". 

Voici exemple de travail .

Ci-dessous, je fournis également TRES HABITUMENT NON RECOMMANDÉ alternative, qui est cependant probablement plus "proche de 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 met pas en œuvre jQuery 'each' (donné dans la réponse @JamesAllardice) parce que nous utilisons du js pur ici. 

Exemple de travail est ici .

0
Kamil Kiełczewski