Ответы:
Попробуйте установить, display:noneчтобы скрыть и установить, display:blockчтобы показать.
display: block, некоторые должны быть установлены display: inline(например, <span>или <a>или <img>элементы DOM).
hiddenс именем display: none. Добавьте класс к элементу, чтобы скрыть его, удалить его показать. При удалении его 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Чтобы это работало, это зависит от макета, но оно должно содержать пустой контент внутри div, в котором он находится.
дисплей: ни один не решение, это полностью скрывает элементы со своим пространством.
display:noneиvisibility: hiddenvisibility:hidden означает, что тег не виден, но для него выделено место на странице.
display:noneзначит полностью скрывает элементы со своим пространством. (хотя вы все равно можете взаимодействовать с ним через DOM)
Переключение displayне допускает плавных переходов CSS. Вместо этого переключите и the visibilityи the max-height.
visibility: hidden;
max-height: 0;transform: translateX(-100%). Мы не хотимdisplay: none
display:noneспрятаться и установить, display:blockчтобы показать.
as though they are not in the DOM at all (but without actually removing them from the DOM)
visibility: hiddenтолько останавливает отображение содержимого, но по-прежнему использует вертикальное / горизонтальное пространство, display: none удаляет вертикальное / горизонтальное пространство для элемента.
Вот другой способ вернуть их после отображения: нет. не используйте display: block / inline и т. д. Вместо этого (если используется javascript) установите для свойства css display значение '' (т. е. пустое)
выше моих знаний это возможно 4 способами
<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. Немного хакерское решение, но оно хорошо работает почти во всех случаях использования.