Risposte:
Prova a impostare display:noneper nascondere e impostare display:blockper mostrare.
display: block, alcuni dovranno essere impostati su display: inline(come <span>o <a>o <img>elementi DOM).
hiddencon display: none. Aggiungi la classe a un elemento per nasconderlo, rimuovilo mostra. Quando lo si rimuove, la displayproprietà viene ripristinata sull'elemento predefinito.
Utilizzare display:noneè una buona opzione solo per rimuovere un elemento MA verrà rimosso anche per i lettori di schermo . Ci sono anche discussioni se influisce sul SEO. C'è un buon breve articolo su questo argomento in A List Apart
Se vuoi semplicemente nascondere e non rimuovere un elemento, usa meglio:
div {
position: absolute;
left: -999em;
}In questo modo può essere letto anche dagli screen reader.
L'unico svantaggio di questo metodo è che questo DIV è effettivamente reso e potrebbe influire sulle prestazioni , specialmente sui telefoni cellulari.
visibility: hidden;, supponiamo che tu abbia altri elementi assoluti di cui non avranno un conflitto per lo spazio, ma solo un conflitto z-index. Solo per nascondere un elemento con cui vorrei andarevisibility
Guarda, invece di usare visibility: hidden;use display: none;. La prima opzione si nasconde ma occupa ancora spazio e la seconda opzione si nasconde e non occupa spazio.
La risposta a questa domanda sta dicendo di usare display: none e display: block, ma questo non aiuta per chi sta cercando di usare le transizioni css per mostrare e nascondere il contenuto usando la proprietà di visibilità.
Anche questo mi ha fatto impazzire, perché l'uso del display uccide tutte le transizioni CSS.
Una soluzione è aggiungere questo alla classe che utilizza la visibilità:
overflow:hiddenPerché ciò funzioni dipende dal layout, ma dovrebbe mantenere il contenuto vuoto all'interno del div in cui risiede.
display: nessuna è soluzione, nasconde completamente gli elementi con il suo spazio.
display:noneevisibility: hiddenvisibility:hidden significa che il tag non è visibile, ma lo spazio è allocato per esso sulla pagina.
display:nonesignifica che nasconde completamente gli elementi con il suo spazio. (anche se puoi ancora interagire con esso tramite il DOM)
display:noneper nascondere e impostare display:blockper mostrare.
as though they are not in the DOM at all (but without actually removing them from the DOM)
visibility: hiddeninterrompe solo la visualizzazione del contenuto ma utilizza ancora lo spazio verticale / orizzontale, display: none rimuove lo spazio verticale / orizzontale per l'elemento.
La commutazione displaynon consente transizioni CSS fluide. Invece attiva sia il visibilityche il max-height.
visibility: hidden;
max-height: 0;transform: translateX(-100%). Non vogliamodisplay: none
ecco una versione diversa di rimetterli dopo la visualizzazione: nessuno. non usare display: block / inline ecc. Invece (se si utilizza javascript) impostare la visualizzazione della proprietà css su '' (cioè vuoto)
sopra la mia conoscenza è possibile in 4 modi
<button style="display:none;"></button>#buttonId{ display:none; }$('#buttonId').prop('display':'none');& $("#buttonId").css('opacity', 0);
offsetTop, edisplay:noneavrei impostato looffsetTop0. La mia soluzione qui era di usarevisibility: hiddenquindi impostare la larghezza e l'altezza su 0. Una volta che avevo bisogno di rendere di nuovo visibile l'elemento, ho rimosso i tre attributi usando Javascript. Una soluzione un po 'confusa, ma funziona bene per quasi tutti i casi d'uso.