jQuery, sayfa düzenindeki alanını korurken öğeyi gizle

169

JQuery'de bir öğeyi gizleyebileceğim, ancak gizli olduğunda DOM'u değiştiremediğim bir yol var mı? Belli bir elemanı saklıyorum ama gizlendiğinde, altındaki elemanlar yukarı hareket ediyor. Bunun olmasını istemiyorum. Alanın aynı kalmasını istiyorum, ancak eleman irade ile gösterilecek / gizlenecek.

Bunu yapabilir miyim?

jquery html

— slandau
kaynak

sıfır genişlik vermeye ne dersiniz?

— mrtsherman

8

@mrtsherman: sıfır genişlik cesaretini kırıyor: birçok ekran okuyucu (kör veya görme yeteneği az olan kullanıcılar tarafından kullanıldığı gibi), bu şekilde 'gizli' olan içeriği okuyacaktır, bu da muhtemelen içerik karışık olduğu için karıştırılabilir. t Bu noktada mevcut olması gerekiyordu. Css görünürlük özelliğini kullanma: gizli buraya gitmenin yoludur.

— BrendanMcK

FadeIn ve fadeOut'tan önce yüksekliği dinamik olarak kaydedebilirsiniz = elems => aşağıya bakın (bir ürün döngüsünde kullanıyorum.) $ ('. Veya-woo-bt'). Parent (). Parent (). Parent (). Parent (). ) .hover (function () {// Alanı koru; var rightHeight = $ (this) .height (); $ (this) .css ('height', rightHeight); // Gizle; $ (this) .parent ( ) .parent (). find ('bir span.family-price'). fadeOut ();}, function () {// Show; $ (this) .parent (). parent (). find ('bir span .family-price '). fadeIn (' yavaş ');});

— Olivier

296

Bunun yerine şunu hide()kullanın:

css('visibility','hidden')

hide()öğeyi belge akışından tamamen kaldıran ve alan kaplamamasına neden olan displaystili olarak ayarlar none.

visibility:hidden alanı olduğu gibi tutar.

— Dr.Molle
kaynak

82

css('visibility','visible')

— Dr.Molle

1

veyacss('visibility', '')

— Anthony McGrath

40

Ayarlamayı deneyin visibilityiçin hidden:

$("#id").css("visibility", "hidden");

— Chad Levy
kaynak

19

display: none;diğer içeriklerinizin geride kalan boş alana taşındığını görürsünüz. ( display: block;her şeyi yoldan çekerek tekrar akışa getirir.)

visibility: hidden;yer kaplayan içerik akışı içinde tutacak ama sadece görünmez olacak. ( visibility: visible;tekrar ortaya çıkaracaktır.)

visibilityİçerik akışınızın değişmeden kalmasını istiyorsanız kullanmak istersiniz.

— Sparky
kaynak

15

Başka bir cevap o jQuery en dikkat edilir fadeToayarlamaz display:nonekudreti de kullanmak yerine, burada bir çözüm sağlamak, böylece tamamlanması fadeOutörneğin:

jQuery, sayfanın geri kalanını rahatsız etmeden bir div öğesini gizleyin

— lunelson
kaynak

7

Daha önce hile opacity: 0görmeden kullandım visibility: hidden.

Ancak birçok durumda opacity: 0sorunludur, çünkü göremeseniz bile elemanla etkileşime girmenizi sağlar ! ( DeadPassive tarafından belirtildiği gibi .)

Genellikle istediğin bu değildir. Ama belki de ara sıra yapabilirsiniz?

— joeytwiddle
kaynak

1

Gizli bir öğeyle etkileşim kuramazken, 0 opaklığa sahip bir öğeyle etkileşim kurabilirsiniz.

— DeadPassive

@feskr Avantajlı olacağı bir durum düşünebiliyorsanız, lütfen paylaşın!

— joeytwiddle

@joeytwiddle Size cevap verdim. Mekanını korurken, belirli bir durumdaki bir elementle etkileşimi önlemem gerekiyordu. Görünürlüğün farkındaydım: gizli alan alanı koruyacaktı, ancak etkileşimi önleyeceğini bilmiyordum.

— feskr