Відповіді:
Спробуйте налаштувати display:noneприховування та налаштувати display:blockпоказ.
display: block, деякі повинні бути встановлені в display: inline(наприклад, <span>чи <a>або <img>елементи DOM).
hiddenз display: none. Додайте клас до елемента, щоб приховати його, видаліть його show. При видаленні його displayвластивість відновлюється до елемента за замовчуванням.
Використовувати display:noneце хороший варіант просто видалити елемент, Але він також буде видалений для екранізаторів . Існують також дискусії, якщо це впливає на SEO. Є хороша, коротка стаття на цю тему на A List Apart
Якщо ви дійсно хочете приховати, а не видалити елемент, краще скористайтеся:
div {
position: absolute;
left: -999em;
}Як і це, його можуть читати також читачі екранів.
Єдиним недоліком цього методу є те, що цей DIV насправді надається та може вплинути на його ефективність , особливо на мобільних телефонах.
visibility: hidden;, скажімо, у вас є інші абсолютні елементи, у них не буде конфлікту для простору, а лише конфлікту z-index. Тільки для того, щоб сховати стихію, з якою я б пішовvisibility
Подивіться, замість visibility: hidden;використання display: none;. Перший варіант буде ховатися, але все ще займає простір, а другий варіант приховатиме і не займе місця.
Відповідь на це запитання говорить про використання display: none та display: block, але це не допомагає тим, хто намагається використовувати переходи css для показу та приховування вмісту за допомогою властивості видимості.
Це також зводило мене з розуму, оскільки використання дисплея вбиває будь-які переходи css.
Одне рішення - додати це до класу, який використовує видимість:
overflow:hiddenДля цього робота залежить від макета, але він повинен зберігати порожній вміст у діві, в якому він перебуває.
показ: жоден не є рішенням, це повністю приховує елементи зі своїм простором.
display:noneіvisibility: hiddenvisibility:hidden означає, що тег не видно, але на ньому виділено простір.
display:noneзасіб повністю приховує елементи зі своїм простором. (хоча ви все ще можете взаємодіяти з ним через DOM)
display:noneсховати і налаштувати display:blockпоказ.
as though they are not in the DOM at all (but without actually removing them from the DOM)
visibility: hiddenзупиняє відображення вмісту, але все ще використовує вертикальний / горизонтальний простір, дисплей: жоден не видаляє вертикальний / горизонтальний простір для елемента.
Toggle displayне дозволяє плавно переходити CSS. Замість цього перемкніть і те, visibilityі те max-height.
visibility: hidden;
max-height: 0;transform: translateX(-100%). Ми не хочемоdisplay: none
ось по-різному відновлення повернення їх після відображення: жодне. не використовувати display: block / inline etc. etc. Замість цього (якщо використовується JavaScript) встановіть для властивості css для '' (тобто порожнім)
вище моїх знань це можливо чотирма способами
<button style="display:none;"></button>#buttonId{ display:none; }$('#buttonId').prop('display':'none');& $("#buttonId").css('opacity', 0);
offsetTop, іdisplay:noneвстановивoffsetTopби 0. Моє рішення тут було використовуватиvisibility: hiddenпотім встановити ширину і висоту на 0. Як тільки мені потрібно було зробити елемент знову видимим, я видалив три атрибути за допомогою Javascript. Трохи хакітне рішення, але воно працює добре для майже всіх випадків використання.