隐藏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

尝试：

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

隐藏（）等价于：$（"。描述"）。css（"显示"，"无"）；

它不保留元素占用的空间。

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

Answer 2

为了完整性，还有另一种选择。切换透明度：

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

http://jsfiddle.net/KPqwt/

然而，对于这项任务，最好使用可见性。

Answer 3

为此使用可见性css属性

能见度：

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

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

演示：小提琴