隐藏div但保留空白间隙

Question

我有以下的div元素：

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

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

然后我在一个元素上绑定了一个点击事件函数，用于隐藏上述div：

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

当我隐藏div时，它会折叠并停止占用空间。这会破坏我的页面布局。

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

- Y2theZ

Answer 1

使用CSS属性visibility来实现此功能。

visibility：

visibility属性指定元素生成的盒子是否被渲染。

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

演示：Fiddle

- Arun P Johny

Answer 2

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

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

http://jsfiddle.net/KPqwt/

然而，使用visibility更适合这项任务。

- dfsq

Answer 3

尝试：

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

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

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

hidden使元素不可见，但仍然保留了空间。

- Darren

Answer 4

需要注意的是，dfsq的例子中使用透明度:0仍然允许内容被选择、复制/粘贴等操作，尽管在选择时没有可见的文本高亮。

- fpscolin

Answer 5

在CSS中有许多实现方法。

• visibility: hidden; // 推荐使用
• transform: scale(0);
• z-index: -999999; // 在特定定位下不起作用
• opacity: 0; // 单击和输入事件仍然有效

- wizawu

Answer 6

您可以在外部将另一个 div 包装起来，并告诉它特定的高度。这样，您的内部 div 就可以显示、隐藏和淡出等操作，而外部 div 将占据页面上的实际空间。

- Heinz

---

你可以这样做。但在什么情况下，你希望这样做呢？因为早在一年前，已经有了更简单的解决方案（无需额外的div），而且不需要硬编码特定的高度？即使你想要一个特定的高度，你也不会这样做，而是将其放在已经存在的元素的css中。我并不是要冒犯任何人，我欣赏提供替代解决方案的好意。但是，在问题得到解决一年之后，建议一个似乎总是次优的解决方案，让我感到困惑。我错过了什么吗？ - ToolmakerSteve