为什么我可以使用jQuery中的.hide()方法，但无法使用.show()方法？

Question

HTML：

<div id="box">my box</div>​

我可以将一个可见的 div 隐藏起来，像这样：http://jsfiddle.net/FfaVW/2/ CSS：

#box {
    visibility:visible;
}​

JS:

jQuery('#box').hide();​

但是我无法像这样显示一个隐藏的div：http://jsfiddle.net/FfaVW/1/ CSS：

#box {
    visibility:hidden;
}​

JS:

jQuery('#box').show();​

- Yarin

Answer 1

show()函数改变的是CSS属性"display"，而不是"visibility"。例如，它可以显示display:none。

jQuery官方文档提供了更多细节：http://api.jquery.com/show/ 这个网站也解释了为什么jQuery会如此行事：http://api.jquery.com/visible-selector/ 其中提到："visibility: hidden"或者"opacity: 0"的元素被认为是可见的，因为它们仍然在布局中占用空间。

- Corbin

---

@Yarin 没问题。我其实很惊讶地发现jQuery会这样表现。 - Corbin

Answer 2

jQuery的show()和hide()会改变display属性。

display属性会影响元素在屏幕上的排列方式。

visibility属性只是决定了元素是否可见，但它仍然会占据空间。

可以查看这个链接来了解它们之间的区别：http://jsfiddle.net/XS4ca/3/

- user900360

Answer 3

不要使用CSS的visibility属性来显示或隐藏Div元素。相反，你应该使用Display:none来隐藏，使用Displan:Block来显示。

举个例子，可以参考下面的链接：

http://jsfiddle.net/FfaVW/7/

http://jsfiddle.net/FfaVW/8/

希望这对你有所帮助。

- Rony SP