隐藏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');

演示:小提琴

Answer 2

另一种选择是为了完整性.切换opacity:

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

http://jsfiddle.net/KPqwt/

但是visibility,优先使用此任务.

Answer 3

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

Answer 4

CSS 中有很多方法可以做到这一点。

• 可见性：隐藏；// 首选
• 变换：缩放（0）；
• z 索引：-999999；// 不适用于特定定位
• 不透明度：0；// 单击和输入事件仍然有效

Answer 5

尝试:

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

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

哪个不保留元素占用的空间.

Hidden 使元素不可见,但仍然保留空间.