jquery 隐藏div但保留空白

46scxncf 于 2023-04-29 发布在 jQuery

关注(0)|答案(6)|浏览(169)

我有如下div元素：

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

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

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

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

当我隐藏div时，它会折叠并停止占用空间。这打乱了我页面的布局。
有没有一种方法可以隐藏div，但仍然保持它之前占用的空间？我不想更改字体颜色，因为它仍然是可选择的。

6条答案

为此使用visibility css属性
能见度：
visibility属性指定是否呈现由元素生成的框。

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

演示：Fiddle

为了完整起见，还有另一个选择。切换opacity：

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

http://jsfiddle.net/KPqwt/
但是，使用visibility是最好的任务。

尝试：

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

hide()相当于：$(".description").css("display", "none");
它不保留元素占用的空间。
Hidden使元素不可见，但仍然保留空间。

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

在CSS中有很多方法可以做到。

你可以在它的外面再加上一个div，并告诉它一个特定的高度。这样你的内部div就可以显示、隐藏和淡出等，而外部div将控制页面上的不动产。