elemen jQuery hide sambil mempertahankan ruangnya di tata letak halaman

169

Apakah ada cara di jQuery di mana saya bisa menyembunyikan elemen, tetapi tidak mengubah DOM saat disembunyikan? Saya menyembunyikan elemen tertentu tetapi ketika disembunyikan, elemen di bawahnya bergerak ke atas. Saya tidak ingin itu terjadi. Saya ingin ruang tetap sama, tetapi elemen ditampilkan / disembunyikan sesuka hati.

Bisakah saya melakukan ini?

jquery html fitnah
sumber
bagaimana kalau memberi lebar nol?
mrtsherman
8
@mrtsherman: nol lebar tidak disarankan: banyak pembaca layar (seperti yang digunakan oleh pengguna yang buta atau memiliki penglihatan rendah) masih akan membacakan konten yang 'tersembunyi' dengan cara ini, yang dapat membingungkan mereka karena mungkin kontennya bukan ' seharusnya tidak tersedia pada saat ini. Menggunakan visibilitas css: tersembunyi adalah cara untuk pergi ke sini.
BrendanMcK
Anda dapat menyimpan ketinggian secara dinamis sebelum fadeIn dan fadeOut elem Anda => lihat di bawah (saya menggunakannya dalam loop produk.) $ ('. Or-woo-bt'). Parent (). Parent (). Parent (). Parent () ) .hover (function () {// Simpan ruang; var rightHeight = $ (this) .height (); $ (this) .css ('height', rightHeight); // Sembunyikan; $ (ini). parent ( ) .parent (). find ('a span.family-price'). fadeOut ();}, function () {// Tampilkan; $ (ini) .parent (). parent (). parent (). find ('span) .family-price '). fadeIn (' slow ');});
Olivier

Jawaban:

296

Alih-alih hide(), gunakan:

css('visibility','hidden')

hide()mengatur displaygaya none, yang sepenuhnya menghapus elemen dari aliran dokumen dan menyebabkannya tidak memakan ruang.

visibility:hidden menjaga ruang seperti apa adanya.

Dr.Molle
sumber
82
css('visibility','visible')
Dr.Molle
1
ataucss('visibility', '')
Anthony McGrath
40

Coba atur visibilityke hidden:

$("#id").css("visibility", "hidden");
Chad Levy
sumber
19

display: none;akan mengeluarkannya dari aliran konten sehingga Anda akan melihat konten Anda yang lain pindah ke ruang kosong yang tertinggal. ( display: block;Membawanya kembali ke aliran mendorong semuanya keluar dari jalan.)

visibility: hidden;akan menyimpannya dalam aliran konten yang menghabiskan ruang tetapi membuatnya tidak terlihat. ( visibility: visible;akan mengungkapkannya lagi.)

Anda akan ingin menggunakan visibilityjika Anda ingin aliran konten Anda tetap tidak berubah.

Sparky
sumber
15

di jawaban lain dicatat bahwa jQuery's fadeTotidak diatur display:nonepada penyelesaian jadi mungkin juga memberikan solusi di sini, daripada menggunakan fadeOutmisalnya:

jQuery, sembunyikan div tanpa mengganggu sisa halaman

Lunelson
sumber
7

Saya sebelumnya menggunakan opacity: 0sebelum saya melihat visibility: hiddentriknya.

Tetapi dalam banyak kasus opacity: 0bermasalah, karena memungkinkan Anda berinteraksi dengan elemen , meskipun Anda tidak dapat melihatnya! (Seperti yang ditunjukkan oleh DeadPassive .)

Biasanya bukan itu yang Anda inginkan. Tetapi mungkin sesekali Anda mungkin?

joeytwiddle
sumber
1
Anda tidak dapat berinteraksi dengan elemen tersembunyi, sementara Anda bisa dengan elemen dengan 0 opacity.
DeadPassive
@feskr Jika Anda bisa memikirkan situasi di mana itu akan menguntungkan, silakan bagikan!
joeytwiddle
@ joeytwiddle saya menemukan jawaban Anda. Saya perlu mencegah interaksi dengan elemen dalam keadaan tertentu, sambil menjaga ruang itu. Saya menyadari fakta bahwa visibilitas: tersembunyi akan menghemat ruang, tetapi tidak tahu itu akan mencegah interaksi.
feskr