隐藏 div 但保留空白答案

【问题标题】：Hide div but keep the empty space隐藏 div 但保留空白
【发布时间】：2013-04-25 08:23:26
【问题描述】：

我有以下 div 元素：

.description {
  color: #b4afaf;
  font-size: 10px;
  font-weight: normal;
}

&lt;div class="description"&gt;Some text here&lt;/div&gt;

然后我在一个元素上有一个点击功能来隐藏上面的div：

$('#target').click(function(){
  $(".description").hide();
});

当我隐藏 div 时，它会折叠并停止占用空间。这弄乱了我的页面布局。

有没有办法隐藏 div，但仍保持之前占用的空间？我不想更改字体颜色，因为它仍然可以选择。

【问题讨论】：

【解决方案1】：

在 CSS 中有很多方法可以做到这一点。

【讨论】：

【解决方案2】：

需要注意的是dfsq 使用 Opacity:0 的示例仍然允许选择、复制/粘贴等内容，尽管选择时没有可见的文本突出显示。

【讨论】：

【解决方案3】：

您可以将另一个 div 包裹在它的外面，并可能告诉它要占据的特定高度。这样你的内部 div 可以显示和隐藏和淡出等，而外部 div 将按住页面上的房地产。

【讨论】：

你可以。但是在什么情况下，当接受的答案（一年前！）更简单（不需要额外的 div）并且不需要硬编码特定高度时，您会在什么情况下这样做？即使您想要一个特定的高度，您也不会这样做，您只需将css 中的高度放在已经存在的元素上。我并不是要粗鲁，我很欣赏有替代解决方案是件好事。在问题解决一年后，我只是对似乎总是较差的解决方案的建议感到困惑？我错过了什么吗？

【解决方案4】：

为了完整起见，还有另一种选择。切换opacity：

$(".description").css('opacity', 0); // hide
$(".description").css('opacity', 1); // show

但是，此任务首选使用 visibility。

【讨论】：

【解决方案5】：

为此使用visibility css 属性

可见性：

可见性属性指定是否由元素被渲染。

$(".description").css('visibility', 'hidden');

演示：Fiddle

【讨论】：

【解决方案6】：

试试：

$(".description").css("visibility", "hidden")

hide() 等价于：$(".description").css("display", "none");

不保留元素占用的空间。

Hidden 使元素不可见，但仍然保留空间。

【讨论】：