jQuery приховає елемент, зберігаючи його простір у макеті сторінки


169

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

Чи можу я це зробити?


як щодо надання нульової ширини?
mrtsherman

8
@mrtsherman: нульова ширина не перешкоджає: багато читачів екранів (як користуються незрячі або слабкі зірки) все одно будуть читати вміст, який "прихований" таким чином, що може заплутати їх як імовірно, що вміст не є " t передбачається, що вони будуть доступні в цей момент часу. Використання видимості css: прихований - це шлях сюди.
BrendanMcK

Ви можете динамічно зберегти висоту перед fadeIn і fadeOut ваші елеми => побачити внизу (я використовую її в циклі продуктів.) $ ('. Або-woo-bt'). Parent (). Parent (). Parent () ) .hover (function () {// Зберегти простір; var rightHeight = $ (this) .height (); $ (this) .css ('height', rightHeight); // Hide; $ (this) .parent ( ) .parent (). find ('a span.family-price'). fadeOut ();}, function () {// Show; $ (this) .parent (). parent (). find ('span .family-price '). fadeIn (' повільний ');});
Олів'є

Відповіді:


296

Замість цього hide()використовуйте:

css('visibility','hidden')

hide()встановлює displayстиль none, який повністю видаляє елемент з документообігу і змушує його не займати місця.

visibility:hidden зберігає простір таким, яким він є.


82
css('visibility','visible')
Dr.Molle

1
абоcss('visibility', '')
Ентоні МакГрат


19

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

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

Ви хочете використовувати, visibilityякщо ви хочете, щоб ваш потік вмісту залишався незмінним.



7

Я раніше використовував, opacity: 0перш ніж побачив visibility: hiddenтрюк.

Але у багатьох випадках opacity: 0це проблематично, оскільки воно дозволяє взаємодіяти з елементом , навіть якщо ви його не бачите! (Як вказував DeadPassive .)

Зазвичай це не те, що ви хочете. Але, можливо, час від часу ви можете?


1
Ви не можете взаємодіяти з прихованим елементом, тоді як ви можете з елементом з 0 непрозорістю.
DeadPassive

@feskr Якщо ви можете придумати ситуацію, коли це було б вигідно, будь ласка, поділіться!
joeytwiddle

@joeytwiddle Я натрапив на твою відповідь. Мені потрібно було запобігти взаємодії з елементом у певному стані, зберігаючи при цьому простір. Я усвідомлював той факт, що видимість: приховане збереже простір, але не знало, що це завадить взаємодії.
feskr
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.