隐藏div但保留空白区域

Question

我有以下div

CSS

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

HTML

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

然后我在一个元素上有一个click函数来隐藏上面的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

http://jsfiddle.net/KPqwt/

然而，使用visibility更适合此任务。

Answer 3

尝试：

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

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

不保留元素占用的空间。

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

Answer 4

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

Answer 5

你可以在它的外面包裹另一个div，并且可能告诉它占据一个特定的高度。这样你的内部div就可以显示和隐藏，fadeOut等等，外部的div会压低页面上的空间。