wake-up-neo.com

Entspricht jQuery .hide () zum Festlegen der Sichtbarkeit: ausgeblendet

In jQuery gibt es die Methoden .hide() und .show(), die die CSS-Einstellung display: none festlegen. 

Gibt es eine äquivalente Funktion, die die Einstellung visibility: hidden setzen würde? 

Ich weiß, dass ich .css() verwenden kann, aber ich bevorzuge eine Funktion wie .hide() oder so. Vielen Dank.

javascriptjquerycssvisibility
305
TMS

Sie könnten Ihre eigenen Plugins erstellen.

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';
    });
};

Wenn Sie die ursprüngliche jQuery toggle() überladen möchten, die ich nicht empfehle ...

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

Es gibt keinen eingebauten, aber Sie könnten ganz leicht selbst einen schreiben:

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

Sie können das dann so nennen:

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

Hier ist ein Arbeitsbeispiel .

95
James Allardice

Eine noch einfachere Möglichkeit besteht darin, die Methode toggleClass () von jQuery zu verwenden

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

Wenn Sie nur die Standardfunktion Ausblenden nur mit Sichtbarkeit benötigen: Ausgeblendet, um das aktuelle Layout beizubehalten, können Sie die Callback-Funktion Ausblenden verwenden, um die CSS im Tag zu ändern. Dokumente in Jquery ausblenden

Ein Beispiel :

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

Dies wird die normale coole Animation verwenden, um das div auszublenden, aber nachdem die Animation beendet ist, setzen Sie die Sichtbarkeit auf ausgeblendet und die Anzeige auf Blockieren.

Ein Beispiel: http://jsfiddle.net/bTkKG/1/

Ich weiß, dass Sie die $ ("# aa"). Css () -Lösung nicht wollten, aber Sie haben nicht angegeben, ob Sie die Animation nur mit der css () -Methode verlieren.

21
h3ct0r

Hier ist eine Implementierung, die wie folgt funktioniert: $.prop(name[,value]) oder $.attr(name[,value]). Wenn die Variable b gefüllt ist, wird die Sichtbarkeit entsprechend festgelegt, und die Variable this wird zurückgegeben (um mit anderen Eigenschaften fortzufahren), andernfalls wird der Sichtbarkeitswert zurückgegeben.

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

Beispiel:

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

Pure JS entspricht 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

Wir verwenden return el, um fließende Schnittstelle "Designmuster" zu erfüllen. 

Hier ist Arbeitsbeispiel .

Nachfolgend gebe ich auch HIGHLY UNRECOMMENDED alternativ, was aber wahrscheinlich eher "nahe an der Frage" Antwort ist:

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

natürlich kann dies nicht jQuery 'each' (in @JamesAllardice Antwort) implementieren, da wir hier reines js verwenden. 

Arbeitsbeispiel ist hier .

0
Kamil Kiełczewski