jQuery-Element ausblenden und dabei den Platz im Seitenlayout beibehalten

169

Gibt es in jQuery eine Möglichkeit, ein Element auszublenden, das DOM jedoch nicht zu ändern, wenn es ausgeblendet ist? Ich verstecke ein bestimmtes Element, aber wenn es ausgeblendet ist, bewegen sich die Elemente darunter nach oben. Ich möchte nicht, dass das passiert. Ich möchte, dass der Raum gleich bleibt, aber das Element nach Belieben angezeigt / ausgeblendet wird.

Kann ich das tun?

jquery html slandau
quelle
Wie wäre es mit einer Breite von Null?
Mrtsherman
8
@mrtsherman: Von einer Breite von Null wird abgeraten: Viele Screenreader (wie sie von blinden oder sehbehinderten Benutzern verwendet werden) lesen weiterhin Inhalte aus, die auf diese Weise "verborgen" sind, was sie möglicherweise verwirrt, da der Inhalt vermutlich nicht vorhanden ist. Es soll zu diesem Zeitpunkt nicht verfügbar sein. Verwenden der CSS-Sichtbarkeit: Versteckt ist der Weg hierher.
BrendanMcK
Sie können die Höhe dynamisch vor dem Ein- und Ausblenden Ihrer Elemente speichern => siehe unten (ich verwende sie in einer Produktschleife.) $ ('. Or-woo-bt'). Parent (). Parent (). Parent () ) .hover (function () {// Platz sparen; var rightHeight = $ (this) .height (); $ (this) .css ('height', rightHeight); // Hide; $ (this) .parent ( ) .parent (). find ('a span.family-price'). fadeOut ();}, function () {// Show; $ (this) .parent (). parent (). find ('a span .family-price '). fadeIn (' slow ');});
Olivier

Antworten:

296

hide()Verwenden Sie stattdessen :

css('visibility','hidden')

hide()Legt den displayStil auf fest none, wodurch das Element vollständig aus dem Dokumentfluss entfernt wird und kein Speicherplatz belegt wird.

visibility:hidden hält den Raum wie er ist.

Dr.Molle
quelle
82
css('visibility','visible')
Dr.Molle
1
odercss('visibility', '')
Anthony McGrath
40

Versuchen Sie , die visibilityzu hidden:

$("#id").css("visibility", "hidden");
Chad Levy
quelle
19

display: none;nimmt es aus dem Inhaltsfluss heraus, sodass Sie sehen, wie sich Ihre anderen Inhalte in den leeren Bereich bewegen, der zurückgelassen wird. ( display: block;Bringt es zurück in den Fluss und schiebt alles aus dem Weg.)

visibility: hidden;hält es innerhalb des Inhaltsflusses und nimmt Platz ein, macht es aber einfach unsichtbar. ( visibility: visible;wird es wieder offenbaren.)

Sie möchten verwenden, visibilitywenn Ihr Inhaltsfluss unverändert bleiben soll.

Sparky
quelle
15

In einer anderen Antwort wird darauf hingewiesen, dass jQuery's fadeTonicht display:nonenach Abschluss festgelegt wird und daher möglicherweise auch hier eine Lösung bietet, anstatt fadeOutbeispielsweise Folgendes zu verwenden:

jQuery, verstecke ein Div, ohne den Rest der Seite zu stören

Lunelson
quelle
7

Ich habe es vorher benutzt, opacity: 0bevor ich den visibility: hiddenTrick gesehen habe.

In vielen Fällen opacity: 0ist dies jedoch problematisch, da Sie damit mit dem Element interagieren können , obwohl Sie es nicht sehen können! (Wie von DeadPassive hervorgehoben .)

Normalerweise ist das nicht das, was du willst. Aber vielleicht gelegentlich?

joeytwiddle
quelle
1
Sie können nicht mit einem versteckten Element interagieren, während Sie mit einem Element mit einer Deckkraft von 0 arbeiten können.
DeadPassive
@feskr Wenn Sie sich eine Situation vorstellen können, in der dies vorteilhaft wäre, teilen Sie sie bitte mit!
Joeytwiddle
@joeytwiddle Ich bin auf deine Antwort gestoßen. Ich musste die Interaktion mit einem Element in einem bestimmten Zustand verhindern und gleichzeitig den Platz erhalten. Ich war mir der Tatsache bewusst, dass Sichtbarkeit: versteckt Platz sparen würde, wusste aber nicht, dass dies die Interaktion verhindern würde.
Feskr