Respostas:
Tente definir display:nonepara ocultar e defina display:blockpara mostrar.
display: block, alguns terão que ser definidos como display: inline(como <span>ou <a>ou <img>elementos DOM).
hiddenwith display: none. Adicione a classe a um elemento para ocultá-lo, remova-o show. Ao removê-lo, a displaypropriedade é restaurada para o elemento padrão.
use o estilo como
<div style="display:none;"></div>Usar display:noneé uma boa opção apenas para remover um elemento, mas também será removido para os leitores de tela . Também há discussões se isso afeta o SEO. Há um artigo curto e bom sobre esse tópico em A List Apart
Se você realmente quer apenas ocultar e não remover um elemento, use melhor:
div {
position: absolute;
left: -999em;
}Assim, também pode ser lido pelos leitores de tela.
A única desvantagem desse método é que esse DIV é realmente renderizado e pode afetar o desempenho , especialmente em telefones celulares.
visibility: hidden;, na maioria dos casos , digamos que você tenha outros elementos absolutos que não terão conflito pelo espaço, apenas conflito de z-index. Apenas por esconder um elemento com o qual eu iriavisibility
Olha, em vez de usar visibility: hidden;use display: none;. A primeira opção oculta, mas ainda ocupa espaço, e a segunda opção oculta e não ocupa espaço.
A resposta a esta pergunta é dizer para usar display: none e display: block, mas isso não ajuda a alguém que está tentando usar transições css para mostrar e ocultar conteúdo usando a propriedade de visibilidade.
Isso também me deixou louco, porque o uso do display mata qualquer transição de css.
Uma solução é adicionar isso à classe que está usando visibilidade:
overflow:hiddenPara que isso funcione, depende do layout, mas deve manter o conteúdo vazio na div em que reside.
display: nenhum é solução, isso esconde completamente os elementos com seu espaço.
display:noneevisibility: hiddenvisibility:hidden significa que a tag não está visível, mas há espaço alocado para ela na página.
display:nonesignifica ocultar completamente elementos com seu espaço. (embora você ainda possa interagir com ele através do DOM)
display:noneocultar e definir display:blockpara mostrar.
as though they are not in the DOM at all (but without actually removing them from the DOM)
visibility: hiddeninterrompe a exibição do conteúdo, mas ainda usa espaço vertical / horizontal; display: none remove o espaço vertical / horizontal do elemento.
A alternância displaynão permite transições CSS suaves. Em vez disso, alterne o visibilitye o max-height.
visibility: hidden;
max-height: 0;transform: translateX(-100%). Nós não queremosdisplay: none
aqui está uma opinião diferente sobre como colocá-los de volta após a exibição: nenhum. não use display: block / inline etc. Em vez disso (se estiver usando javascript), defina css property display como '' (ou seja, em branco)
acima do meu conhecimento, é possível de 4 maneiras
<button style="display:none;"></button>#buttonId{ display:none; }$('#buttonId').prop('display':'none');& $("#buttonId").css('opacity', 0);
offsetTopedisplay:nonedefini-looffsetTopcomo 0. Minha solução aqui foi usar, emvisibility: hiddenseguida, defina a largura e a altura como 0. Depois que precisei tornar o elemento visível novamente, removi os três atributos usando Javascript. Um pouco de uma solução hacky, mas funciona bem em praticamente todos os casos de uso.