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

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