jQuery隱藏元素，同時在頁面佈局中保留空間

147

jQuery中有一種方法可以隱藏元素，但在隱藏時不會更改DOM嗎？我隱藏了某個元素，但隱藏時，它下面的元素向上移動。我不希望這種情況發生。我希望空間保持不變，但要隨意顯示/隱藏元素。jQuery隱藏元素，同時在頁面佈局中保留空間

我可以這樣做嗎？

2011-06-18 slandau

如何給它零寬度？ – mrtsherman

@mrtsherman：零寬度是不鼓勵的：許多屏幕閱讀器（如盲人或低視力用戶所使用的）仍然會以這種方式讀出'隱藏'的內容，這可能會混淆視聽內容在這個時間點應該是可用的。使用CSS可見性：隱藏是去這裏的方式。 – BrendanMcK

252

相反的hide()，使用：

css('visibility','hidden')

hide()設置display風格none，可以完全脫離文檔流和原因刪除元素它不佔用空間。

visibility:hidden保持原樣。

2011-06-18 03:21:41

我會如何重新展示它？ – slandau

+70

'css（'visibility'，'visible'）' –

嘗試將visibility到hidden：

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

2011-06-18 03:20:10

display: none;將把它帶出內容流，所以你會看到你的其他內容進入留下的空白空間。（display: block;將它帶回到推動一切的流程中。）

visibility: hidden;將使其保持在佔用空間的內容流中，但只是使其不可見。（visibility: visible;將再次顯示它。）

如果您希望內容流保持不變，則需要使用visibility。

在另一個答案

2011-06-18 03:24:43 Sparky

值得注意的是jQuery的fadeTo不設置完成display:none所以也可以在這裏提供一個解決方案，而不是使用fadeOut例如：

2012-09-24 10:14:50 lunelson

我我以前用過opacity:0看到這個visibility:hidden的詭計。

我沒有意識到任何優點，實際上渲染可能會比較慢。但無論如何這是一個替代方案。

一個顯著不同的是，你不能交互使用具有visibility:hidden但用戶可以與具有opacity:0元素交互元素（如集中或點擊）。這可能是隱藏元素的缺點。（指出DeadPassive。）

2014-02-13 16:03:50 joeytwiddle

您不能與隱藏元素進行交互，而您可以使用不透明度爲0的元素。 – DeadPassive

還是有優勢的;） – feskr

@feskr如果你能想到一個有利的情況，請分享！ – joeytwiddle

回答