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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 16:55:24  来源:igfitidea点击:

Hide div but keep the empty space

jquerycsshtmlhide

提问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

http://jsfiddle.net/KPqwt/

http://jsfiddle.net/KPqwt/

However using visibilityis 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.

这不保留元素占用的空间。

Hiddenmakes the element invisible, but stills reserves the space.

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

回答by fpscolin

It's important to note that dfsq's example using Opacity:0 will still allow the contents to be selected, copy/pasted, etc., although there is no visible text-highlighting when selecting.

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

回答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 将按住页面上的不动产。