jquery - 隐藏 div 但保留空白

Question

我有以下 div 元素：

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

<div class="description">Some text here</div>

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

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

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

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

score 165 · Accepted Answer

为此使用可见性css 属性

能见度：

可见性属性指定是否呈现由元素生成的框。

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

score 13 · Accepted Answer

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

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

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

score 11 · Accepted Answer

尝试：

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

hide()相当于：$(".description").css("display", "none");

这不会保留元素占用的空间。

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

score 6 · Accepted Answer

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

score 3 · Accepted Answer

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

score 1 · Accepted Answer

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

6 回答 6