jQuery nasconde l'elemento preservandone lo spazio nel layout di pagina

169

C'è un modo in jQuery in cui posso nascondere un elemento, ma non cambiare il DOM quando è nascosto? Sto nascondendo un certo elemento ma quando è nascosto, gli elementi sottostanti si spostano verso l'alto. Non voglio che ciò accada. Voglio che lo spazio rimanga lo stesso, ma l'elemento deve essere mostrato / nascosto a piacimento.

Posso farlo?

jquery html

— slandau
fonte

che ne dici di dargli larghezza zero?

— Mrtsherman,

8

@mrtsherman: la larghezza zero è scoraggiata: molti screen reader (usati dagli utenti non vedenti o ipovedenti) continueranno a leggere contenuti "nascosti" in questo modo, il che potrebbe confonderli perché presumibilmente il contenuto non è " non dovrebbe essere disponibile in questo momento. Usando la visibilità css: nascosto è il modo di andare qui.

— Brendan McK

Puoi salvare l'altezza in modo dinamico prima di fadeIn e fadeOut your elems => vedi al piano di sotto (lo sto usando in un ciclo di prodotti.) $ ('. Or-woo-bt'). Parent (). Parent (). Parent (). Parent () ) .hover (function () {// Conserva spazio; 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

Invece di hide(), utilizzare:

css('visibility','hidden')

hide()imposta lo displaystile su none, che rimuove completamente l'elemento dal flusso del documento e fa sì che non occupi spazio.

visibility:hidden mantiene lo spazio così com'è.

— Dr.Molle
fonte

82

css('visibility','visible')

— Dr.Molle,

1

oppurecss('visibility', '')

— Anthony McGrath,

40

Prova a impostare visibilitya hidden:

$("#id").css("visibility", "hidden");

— Chad Levy
fonte

19

display: none;lo eliminerà dal flusso di contenuti in modo da vedere gli altri contenuti spostarsi nello spazio vuoto lasciato alle spalle. ( display: block;lo riporta nel flusso spingendo tutto di mezzo.)

visibility: hidden;lo manterrà all'interno del flusso di contenuto occupando spazio, ma semplicemente lo renderà invisibile. ( visibility: visible;lo rivelerà di nuovo.)

Ti consigliamo di utilizzarlo visibilityse desideri che il flusso di contenuti rimanga invariato.

— Sparky
fonte

15

in un'altra risposta si noti che jQuery fadeTonon si avvia display:noneal completamento, quindi potrebbe anche fornire una soluzione qui, anziché utilizzare fadeOutad esempio:

jQuery, nascondi un div senza disturbare il resto della pagina

— lunelson
fonte

7

opacity: 0Prima l'ho usato prima di vedere il visibility: hiddentrucco.

Ma in molti casi opacity: 0è problematico, perché ti consente di interagire con l'elemento , anche se non riesci a vederlo! (Come sottolineato da DeadPassive .)

Di solito non è quello che vuoi. Ma forse occasionalmente potresti?

— joeytwiddle
fonte

1

Non puoi interagire con un elemento nascosto, mentre puoi farlo con un elemento con 0 opacità.

— DeadPassive,

@feskr Se riesci a pensare a una situazione in cui sarebbe vantaggioso, ti preghiamo di condividere!

— Joeytwiddle,

@joeytwiddle Mi sono imbattuto nella tua risposta. Avevo bisogno di impedire l'interazione con un elemento in un certo stato, preservandone lo spazio. Ero consapevole del fatto che la visibilità: nascosto avrebbe preservato lo spazio, ma non sapevo che avrebbe impedito l'interazione.

— venerdì