隐藏div但保留空白

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

使用可见度为此css属性

能见度：

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

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

演示：小提琴

为了完整性，还有另一个选择。切换opacity：

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

http://jsfiddle.net/KPqwt/

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

尝试：

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

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

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

Hidden 使元素不可见，但静止图像保留空间。

重要的是要注意，尽管选择时没有可见的文本高亮显示，但使用Opacity：0的dfsq的示例仍将允许选择内容，复制/粘贴内容等。

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