隐藏div但保留空的空间

我有以下的div

CSS

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

HTML

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

然后我有一个元素的点击function来隐藏上面的div：

 $('#target').click(function(){ $(".description").hide(); }); 

当我隐藏div时，它会崩溃（停止占用任何空间）。 这是与我的网页布局搞乱。

有没有一种方法可以隐藏div，但仍占用之前的空间？ 我不想更改字体颜色，因为它仍然可以select。

谢谢

Answer 1

使用可见性的 CSS属性为此

能见度：

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

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

演示： 小提琴

Answer 2

另一种select是为了完整性。 切换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

需要注意的是，使用Opacity：0的dfsq示例仍然允许select内容，复制/粘贴等，虽然在select时没有可见的文本高亮显示。

Answer 5

你可以把另外一个div包在它的外面，可能会告诉它一个特定的高度。 这样你的内部div可以显示和隐藏和fadeOut等，外部的div将压制页面上的房地产。