Odpowiedzi:
Spróbuj ustawić, display:noneaby ukryć i ustawić, display:blockaby pokazać.
display: block, niektóre będą musiały być ustawione na display: inline(takie jak <span>lub <a>lub <img>elementy DOM).
hiddenwith display: none. Dodaj klasę do elementu, aby go ukryć, usuń go pokaż. Podczas usuwania displaywłaściwość jest przywracana do domyślnego elementu.
Użycie display:nonejest dobrą opcją tylko do usunięcia elementu, ALE zostanie ono również usunięte w przypadku czytników ekranu . Trwają również dyskusje, czy wpływa to na SEO. Jest dobry, krótki artykuł na ten temat na A List Apart
Jeśli naprawdę chcesz tylko ukryć, a nie usunąć element, lepiej użyj:
div {
position: absolute;
left: -999em;
}W ten sposób może być również czytany przez czytniki ekranu.
Jedyną wadą tej metody jest to, że ten DIV jest renderowany i może mieć wpływ na wydajność , szczególnie na telefony komórkowe.
visibility: hidden;, powiedzmy, że masz inne elementy absolutne, które nie będą powodować konfliktu dla przestrzeni, tylko konflikt z-index. Tylko za ukrywanie elementu, z którym bym poszedłvisibility
Spójrz, zamiast używać visibility: hidden;use display: none;. Pierwsza opcja się ukryje, ale nadal zajmuje miejsce, a druga opcja się ukryje i nie zajmuje miejsca.
Odpowiedź na to pytanie brzmi: użyj display: none i display: block, ale to nie pomaga komuś, kto próbuje użyć przejść css do wyświetlania i ukrywania zawartości za pomocą właściwości visibility.
Doprowadziło mnie to również do szaleństwa, ponieważ użycie display zabija wszelkie przejścia css.
Jednym z rozwiązań jest dodanie tego do klasy korzystającej z widoczności:
overflow:hiddenAby to zadziałało, zależy to od układu, ale powinno zachować pustą zawartość w div, w którym się znajduje.
display: żadne nie jest rozwiązaniem, to całkowicie ukrywa elementy swoją przestrzenią.
display:noneivisibility: hiddenvisibility:hidden oznacza, że tag nie jest widoczny, ale na stronie przydzielono mu miejsce.
display:noneoznacza całkowicie ukrywa elementy swoją przestrzenią. (chociaż nadal możesz z nim wchodzić w interakcje za pośrednictwem DOM)
display:noneukryć i ustawić display:blockdo pokazania.
as though they are not in the DOM at all (but without actually removing them from the DOM)
visibility: hiddenzatrzymuje tylko wyświetlanie treści, ale nadal wykorzystuje przestrzeń pionową / poziomą, display: none usuwa przestrzeń pionową / poziomą dla elementu.
Przełączanie displaynie pozwala na płynne przejścia CSS. Zamiast tego przełączaj oba visibilityprzyciski max-height.
visibility: hidden;
max-height: 0;transform: translateX(-100%). Nie chcemydisplay: none
oto inne podejście do przywracania ich po wyświetleniu: brak. nie używaj display: block / inline itp. Zamiast tego (jeśli używasz javascript) ustaw wyświetlanie właściwości css na '' (tj. puste)
powyżej mojej wiedzy jest to możliwe na 4 sposoby
<button style="display:none;"></button>#buttonId{ display:none; }$('#buttonId').prop('display':'none');& $("#buttonId").css('opacity', 0);
offsetTop, idisplay:noneustawiłbymoffsetTopna 0. Moim rozwiązaniem było użycie,visibility: hiddena następnie ustawienie szerokości i wysokości na 0. Gdy potrzebowałem, aby element był ponownie widoczny, usunąłem trzy atrybuty za pomocą JavaScript. Trochę hacky rozwiązanie, ale działa dobrze dla prawie wszystkich przypadków użycia.