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

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

我能这么做吗？

94098 次浏览

小开

尝试将 visibility设置为 hidden:

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

小开

最佳答案

使用:

css('visibility','hidden')

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

visibility:hidden保持空间不变。

小开

display: none;将把它从内容流中取出，这样您就可以看到其他内容移动到留下的空白空间中。(display: block;将其带回流中，推开一切障碍。)

visibility: hidden;将它保持在内容流中，占用空间，但只是使它不可见。(visibility: visible;将再次揭示它。)

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

小开

在另一个答案中，我们注意到 jQuery 的 fadeTo在完成时不设置 display:none，因此这里可能也提供了一个解决方案，而不是使用 fadeOut，例如:

小开

我以前使用 opacity: 0之前，我看到的 visibility: hidden技巧。

但在许多情况下，opacity: 0是有问题的，因为它是 允许您与元素交互，即使你看不到它！(正如死被动指出的那样。)

通常那不是你想要的，但也许偶尔你会想要？