jQuery скрывает элемент, сохраняя его место в макете страницы

169

Есть ли способ в jQuery, где я могу скрыть элемент, но не изменить DOM, когда он скрыт? Я скрываю определенный элемент, но когда он скрыт, элементы под ним перемещаются вверх. Я не хочу, чтобы это случилось. Я хочу, чтобы пространство оставалось таким же, но элемент должен быть показан / скрыт по желанию.

Я могу это сделать?

jquery html

— slandau
источник

как насчет придания ему нулевой ширины?

— Мртшерман

8

@mrtsherman: нулевая ширина не рекомендуется: многие программы чтения с экрана (используемые пользователями, которые являются слепыми или имеют слабое зрение), будут по-прежнему считывать контент, который «скрыт» таким образом, что может ввести их в заблуждение, так как предположительно контент не существует. Я должен быть доступен в данный момент. Использование CSS видимости: скрытый путь сюда.

— BrendanMcK

Вы можете сохранить высоту динамически до того, как fadeIn и fadeOut ваши elems => увидят внизу (я использую это в цикле продуктов.) $ ('. Or-woo-bt'). Parent (). Parent (). Parent ( ) .hover (function () {// Сохраняем пространство; var rightHeight = $ (this) .height (); $ (this) .css ('height', rightHeight); // Hide; $ (this) .parent ( ) .parent (). find ('span.family-price'). fadeOut ();}, function () {// Show; $ (this) .parent (). parent (). find ('span .family-price '). fadeIn (' slow ');});

— Оливье

296

Вместо этого hide()используйте:

css('visibility','hidden')

hide()устанавливает displayстиль none, который полностью удаляет элемент из потока документов и заставляет его не занимать место.

visibility:hidden держит пространство как есть.

— Dr.Molle
источник

82

css('visibility','visible')

— Доктор Молл

1

илиcss('visibility', '')

— Энтони МакГрат

40

Попробуйте установить visibilityдля hidden:

$("#id").css("visibility", "hidden");

— Чад Леви
источник

19

display: none;извлечет его из потока контента, и вы увидите, как ваш другой контент переместится в пустое пространство, оставленное позади. ( display: block;возвращает его обратно в поток, выталкивая все с пути.)

visibility: hidden;будет держать его в потоке контента, занимая место, но просто сделав его невидимым. ( visibility: visible;покажет это снова.)

Вы захотите использовать, visibilityесли хотите, чтобы ваш поток контента оставался неизменным.

— Спарки
источник

15

в другом ответе отмечается, что jQuery fadeToне устанавливается display:noneпо завершении, поэтому может также предоставить решение здесь, а не использовать, fadeOutнапример:

jQuery, скрыть div, не мешая остальной части страницы

— lunelson
источник

7

Я раньше использовал, opacity: 0прежде чем увидел visibility: hiddenтрюк.

Но во многих случаях opacity: 0это проблематично, поскольку позволяет вам взаимодействовать с элементом , даже если вы его не видите! (Как указывает DeadPassive .)

Обычно это не то, что вы хотите. Но, может быть, иногда вы могли бы?

— joeytwiddle
источник

1

Вы не можете взаимодействовать со скрытым элементом, в то время как вы можете взаимодействовать с элементом с непрозрачностью 0.

— DeadPassive

@feskr Если вы можете вспомнить ситуацию, в которой это было бы выгодно, пожалуйста, поделитесь!

— Joeytwiddle

@joeytwiddle Я наткнулся на ваш ответ. Мне нужно было предотвратить взаимодействие с элементом в определенном состоянии, сохраняя при этом его пространство. Я знал о том факте, что видимость: скрытый сохранит пространство, но не знал, что это помешает взаимодействию.

— Фескр