jQuery隐藏元素，同时在页面布局中保留其空间

169

jQuery中有没有一种方法可以隐藏元素，但是在隐藏元素时不更改DOM？我正在隐藏某个元素，但是当它被隐藏时，它下面的元素会向上移动。我不希望那样发生。我希望空间保持不变，但是元素可以随意显示/隐藏。

我可以这样做吗？

jquery html

— 斯兰道
source

给它零宽度怎么样？

— mrtsherman 2011年

8

@mrtsherman：不建议使用零宽度：许多屏幕阅读器（供盲人或视力低下的用户使用）仍会以这种方式读出“隐藏”的内容，这可能会使他们感到困惑，因为大概是内容“应该在此时间点可用。使用CSS可见性：隐藏是前往此处的方法。

— BrendanMcK 2011年

您可以在fadeIn和fadeOut元素之前动态保存高度=>参见楼下（我在产品循环中使用它。）$（'。or-woo-bt'）。parent（）。parent（）。parent（）.hover（function（）{//保留空间; var rightHeight = $（this）.height（）; $（this）.css（'height'，rightHeight）; //隐藏; $（this）.parent（）.parent（）。find（'a span.family-price'）。fadeOut（）;}，function（）{//显示； $（this）.parent（）。parent（）。find（'a span .family-price'）。fadeIn（'slow'）;}）;

— 奥利维尔，

296

代替hide()，使用：

css('visibility','hidden')

hide()将display样式设置为none，这会从文档流中完全删除元素，并使其不占用空间。

visibility:hidden 保持空间不变。

— 莫尔博士
source

82

css('visibility','visible')

— Molle博士，2011年

1

或css('visibility', '')

— Anthony McGrath，

40

尝试将设置visibility为hidden：

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

— 乍得·利维
source

19

display: none;会将其从内容流中删除，因此您将看到其他内容移到了留下的空白处。（display: block;将其带回到流程中，将所有内容推开。）

visibility: hidden;会将其保留在占用空间的内容流中，而只是使其不可见。（visibility: visible;将再次显示。）

visibility如果您希望内容流保持不变，则需要使用。

— 活泼的
source

15

在另一个答案中，请注意，jQuery fadeTo并未display:none在完成时设置，因此也可能在此处提供解决方案，而不是fadeOut例如使用：

jQuery，隐藏div而不干扰页面的其余部分

— 伦纳森
source

7

我以前opacity: 0没有看过visibility: hidden窍门就使用过。

但是在很多情况下opacity: 0是有问题的，因为即使您看不到它，它也可以让您与该元素进行交互！（如DeadPassive所指出。）

通常这不是您想要的。但是也许偶尔你会呢？

— joeytwiddle
source

1

您不能与隐藏元素进行交互，而可以与不透明度为0的元素进行交互。

— DeadPassive '16

@feskr如果您能想到有利的情况，请分享！

— joeytwiddle

@joeytwiddle我偶然发现了你的答案。我需要防止与处于特定状态的元素进行交互，同时保留其空间。我知道以下事实：可见性：隐藏会保留空间，但不知道会阻止交互。

— feskr '16