jQuery 隐藏 div 但保留空白空间
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/16316431/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide div but keep the empty space
提问by Youssef
I have the following div element:
我有以下 div 元素:
.description {
color: #b4afaf;
font-size: 10px;
font-weight: normal;
}
<div class="description">Some text here</div>
Then I have a click function on an element to hide the above div:
然后我在一个元素上有一个点击功能来隐藏上面的div:
$('#target').click(function(){
$(".description").hide();
});
When I hide the div, it collapses and stops taking up space. This messes up the layout of my page.
当我隐藏 div 时,它会折叠并停止占用空间。这弄乱了我的页面布局。
Is there a way to hide the div, but still maintain the space it was taking before? I don't want to change the font color because it would be still selectable.
有没有办法隐藏div,但仍然保持以前占用的空间?我不想更改字体颜色,因为它仍然可以选择。
回答by Arun P Johny
Use visibilitycss property for this
为此使用可见性css 属性
visibility:
能见度:
The visibility property specifies whether the boxes generated by an element are rendered.
可见性属性指定是否呈现由元素生成的框。
$(".description").css('visibility', 'hidden');
Demo: Fiddle
演示:小提琴
回答by dfsq
And another option for the sake of completeness. Toggle opacity
:
为了完整起见,还有另一种选择。切换opacity
:
$(".description").css('opacity', 0); // hide
$(".description").css('opacity', 1); // show
However using visibility
is prefered for this task.
但是visibility
,此任务首选使用。
回答by Darren
Try:
尝试:
$(".description").css("visibility", "hidden")
hide()
is the equivalent to: $(".description").css("display", "none");
hide()
相当于: $(".description").css("display", "none");
Which does not reserve the space the element was taking.
这不保留元素占用的空间。
Hidden
makes the element invisible, but stills reserves the space.
Hidden
使元素不可见,但仍保留空间。
回答by fpscolin
回答by Heinz
you can wrap another div around the outside of it, and probably tell it a specific height to occupy. that way your inner div can show and hide and fadeOut, etc, and the outer div will hold down the real-estate on the page.
您可以将另一个 div 包裹在它的外部,并可能告诉它要占据的特定高度。这样你的内部 div 可以显示和隐藏和淡出等,而外部 div 将按住页面上的不动产。