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

原文由 Y2theZ 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

为此使用 可见性 css 属性

能见度：

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

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

演示： 小提琴

原文由 Arun P Johny 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

http://jsfiddle.net/KPqwt/

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

原文由 dfsq 发布，翻译遵循 CC BY-SA 3.0 许可协议