隐藏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，但仍然保持它之前占用的空间？我不想更改字体颜色，因为它仍然可以选择。

Answer 1

为此使用visibility css属性

能见度：

visibility 属性指定框是否由一个元素被渲染。

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

演示：Fiddle

Answer 2

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

opacity

：

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

然而，使用

visibility

是这项任务的首选。

Answer 3

尝试：

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

hide()

等同于：

$(".description").css("display", "none");

不保留元素占用的空间。

Hidden

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

Answer 4

重要的是要注意dfsq使用不透明度：0的示例仍然允许选择，复制/粘贴等内容，尽管选择时没有可见的文本突出显示。

Answer 5

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

Answer 6

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

Answer 7

0
投票

顺风的人，使用

invisible