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

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

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


html jquery
person slandau    schedule 18.06.2011    source источник
comment
как насчет того, чтобы дать ему нулевую ширину?   -  person mrtsherman    schedule 18.06.2011
comment
@mrtsherman: нулевая ширина не приветствуется: многие программы чтения с экрана (используемые слепыми или слабовидящими пользователями) по-прежнему будут считывать контент, который таким образом `` скрыт '', что может сбить их с толку, поскольку, по-видимому, это не контент. t должен быть доступен в данный момент. Использование css visibility: hidden - это правильный путь.   -  person BrendanMcK    schedule 18.06.2011
comment
Вы можете динамически сохранять высоту перед fadeIn и fadeOut ваши elems = ›см. Внизу (я использую его в цикле продуктов.) $ ('. Or-woo-bt'). Parent (). Parent (). Parent ( ) .hover (function () {// Сохранить пространство; var rightHeight = $ (this) .height (); $ (this) .css ('height', rightHeight); // Скрыть; $ (this) .parent ( ) .parent (). find ('a span.family-price'). fadeOut ();}, function () {// Показать; $ (this) .parent (). parent (). find ('диапазон .family-price '). fadeIn (' медленно ');});   -  person Olivier    schedule 16.02.2019

Ответы (5)


arrow_upward
301
arrow_downward

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

css('visibility','hidden')

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

visibility:hidden сохраняет пространство как есть.

person Dr.Molle    schedule 18.06.2011

arrow_upward
41
arrow_downward

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

$("#id").css("visibility", "hidden");
person Chad Levy    schedule 18.06.2011

arrow_upward
19
arrow_downward

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

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

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

person Sparky    schedule 18.06.2011

arrow_upward
15
arrow_downward

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

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

person lunelson    schedule 24.09.2012

arrow_upward
7
arrow_downward

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

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

Обычно это не то, что вам нужно. Но, может быть, изредка?

person joeytwiddle    schedule 13.02.2014
comment
Вы не можете взаимодействовать со скрытым элементом, но можете с элементом с 0 непрозрачностью. - person DeadPassive; 19.01.2016
comment
@feskr Если вы можете придумать ситуацию, в которой это было бы выгодно, поделитесь, пожалуйста! - person joeytwiddle; 12.02.2016
comment
@joeytwiddle Я наткнулся на ваш ответ. Мне нужно было предотвратить взаимодействие с элементом в определенном состоянии, сохранив при этом его пространство. Я знал, что видимость: скрытый сохранит пространство, но не знал, что это предотвратит взаимодействие. - person feskr; 17.02.2016