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если хотите, чтобы ваш поток контента оставался неизменным.

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

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

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

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

joeytwiddle
источник
1
Вы не можете взаимодействовать со скрытым элементом, в то время как вы можете взаимодействовать с элементом с непрозрачностью 0.
DeadPassive
@feskr Если вы можете вспомнить ситуацию, в которой это было бы выгодно, пожалуйста, поделитесь!
Joeytwiddle
@joeytwiddle Я наткнулся на ваш ответ. Мне нужно было предотвратить взаимодействие с элементом в определенном состоянии, сохраняя при этом его пространство. Я знал о том факте, что видимость: скрытый сохранит пространство, но не знал, что это помешает взаимодействию.
Фескр