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

Question

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

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

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

390 5

jQuery html

5 ответов:

Comments

Ничего не найдено.

Dr.Molle · Accepted Answer · 2012-03-02 05:13:18

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

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

Chad Levy · Accepted Answer · 2011-06-18 06:20:10

попробуйте установить visibility to hidden:
$("#id").css("visibility", "hidden");

Sparky · Accepted Answer · 2011-06-18 06:30:06

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

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

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

lunelson · Accepted Answer · 2017-05-23 15:03:04

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

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

joeytwiddle · Accepted Answer · 2017-05-23 15:34:44

Я opacity:0 прежде чем я увидел этот visibility:hidden трюк.

Я не знаю никаких преимуществ, на самом деле это, вероятно, медленнее, чтобы сделать. Но это все равно альтернатива.

одно существенное различие заключается в том, что вы не можете взаимодействовать (например, фокус или щелчок) с элементом, который имеет visibility:hidden но взаимодействие с элементом opacity:0. Это, вероятно, недостаток для скрытого элемента. (Указывается DeadPassive.)