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

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