隐藏div但保留空白空间 [英] Hide div but keep the empty space

问题描述

我有以下div

CSS

  .description {
 color：＃b4afaf; 
 font-size：10px; 
 font-weight：normal; 
 
  

HTML

 < div class =description>一些文字在这里< / div> 
  

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

  $（'＃target'）。click（function（）{
 $（。description）。hide（）; 
}）; 
  

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

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

谢谢

解决方案

使用可见性 css属性

可见性：

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

  $（。description）。css（'visibility'，'hidden'）; 
  

演示：小提琴

I have the following div

CSS

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

HTML

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

Then I have a click function on an element to hide the above div:

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

When I hide the div it will collapse (stop taking any space). This is messing with the layout of my page.

Is there a way I can hide the div but still take the space that it was taking before? I dont want to change the font color because it would be still selectable.

Thanks

解决方案

Use visibility css property for this

visibility:

The visibility property specifies whether the boxes generated by an element are rendered.

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

Demo: Fiddle

这篇关于隐藏div但保留空白空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！