jQuery hide element, zachowując jego miejsce w układzie strony

169

Czy istnieje sposób w jQuery, w którym mogę ukryć element, ale nie zmienić DOM, gdy jest on ukryty? Ukrywam pewien element, ale kiedy jest ukryty, elementy pod nim przesuwają się w górę. Nie chcę, żeby to się stało. Chcę, aby przestrzeń pozostała taka sama, ale element ma być pokazywany / ukrywany do woli.

Mogę to zrobić?

jquery html slandau
źródło
co powiesz na nadanie mu zerowej szerokości?
mrtsherman
8
@mrtsherman: odradza się zerową szerokość: wiele czytników ekranu (używanych przez niewidomych lub niedowidzących) nadal odczytuje treści, które są `` ukryte '' w ten sposób, co może ich zmylić, ponieważ prawdopodobnie treść nie jest nie powinien być dostępny w tym momencie. Korzystanie z widoczności CSS: ukryte jest sposobem na to.
BrendanMcK
Możesz dynamicznie zapisać wysokość przed fadeIn i fadeOut your elems => zobacz na dole (używam go w pętli produktów). $ ('. Or-woo-bt'). Parent (). Parent (). Parent ( ) .hover (function () {// Zachowaj miejsce; var rightHeight = $ (this) .height (); $ (this) .css ('height', rightHeight); // Ukryj; $ (this) .parent ( ) .parent (). find ('a span.family-price'). fadeOut ();}, function () {// Show; $ (this) .parent (). parent (). find ('a span .family-price '). fadeIn (' slow ');});
Olivier

Odpowiedzi:

296

Zamiast hide()używać:

css('visibility','hidden')

hide()ustawia displaystyl na none, co całkowicie usuwa element z przepływu dokumentu i powoduje, że nie zajmuje on miejsca.

visibility:hidden utrzymuje przestrzeń taką, jaka jest.

Dr Molle
źródło
82
css('visibility','visible')
Dr Molle
1
lubcss('visibility', '')
Anthony McGrath
40

Spróbuj ustawić visibilityna hidden:

$("#id").css("visibility", "hidden");
Chad Levy
źródło
19

display: none;usunie go z przepływu treści, dzięki czemu zobaczysz, jak inne treści zostaną przeniesione do pustej przestrzeni. ( display: block;przenosi go z powrotem do strumienia, wypychając wszystko z drogi).

visibility: hidden;utrzyma go w strumieniu treści, zajmując miejsce, ale po prostu sprawi, że będzie niewidoczny. ( visibility: visible;ujawni to ponownie.)

Będziesz chciał użyć, visibilityjeśli chcesz, aby przepływ treści pozostał niezmieniony.

iskrzący
źródło
15

w innej odpowiedzi należy zauważyć, że jQuery fadeTonie ustawia się display:nonepo zakończeniu, więc może również dostarczyć tutaj rozwiązanie, zamiast używać fadeOutna przykład:

jQuery, ukryj div bez naruszania reszty strony

lunelson
źródło
7

Użyłem wcześniej, opacity: 0zanim zobaczyłem visibility: hiddensztuczkę.

Ale w wielu przypadkach opacity: 0jest to problematyczne, ponieważ pozwala na interakcję z elementem , nawet jeśli go nie widać! (Jak wskazał DeadPassive .)

Zwykle nie tego chcesz. Ale może czasami możesz?

joeytwiddle
źródło
1
Nie możesz wchodzić w interakcje z ukrytym elementem, tak jak możesz z elementem o kryciu 0.
DeadPassive
@feskr Jeśli możesz pomyśleć o sytuacji, w której byłoby to korzystne, podziel się nim!
joeytwiddle
@joeytwiddle Natknąłem się na twoją odpowiedź. Musiałem zapobiec interakcji z elementem w określonym stanie, jednocześnie zachowując jego przestrzeń. Zdawałem sobie sprawę, że visibility: hidden chroni przestrzeń, ale nie wiedziałem, że uniemożliwi interakcję.
feskr