it-swarm.com.de

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.

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