jQuery是（'：visible'）表现得很有趣。

Question

我在使用jQuery测试对象的可见性时遇到了一个奇怪的问题。

我有这个测试JS：

alert($myObject.css('display'));
alert($myObject.is(':visible'));

第一个警告显示'block'，这有意义，因为firebug清楚地显示它被设置为display：block，你可以在浏览器中看到页面上的对象。

但是，第二个警报显示“false”。对我来说根本没有任何意义。

我是否误解了is（'：visible'）的使用？

Answer 1

考虑这个HTML：

<div id="div1" style="display: none;">
    <div id="div2">
        <p>Some div content</p>
    </div>
</div>

和这个JavaScript：

$myObject = jQuery('#div2');
alert($myObject.css('display')); // 'block'
alert($myObject.is(':visible')); // false

$myObject有多种原因可能无法显示，即使它设置了display: none样式。有关详细信息，请参阅:visible selector docs。

现在有意义吗？

Answer 2

:visible选择器与display css属性不等效。

在链接文档中，可见时为false：

• CSS显示值为none。
• 它们是type =“hidden”的表单元素。
• 它们的宽度和高度明确设置为0.
• 隐藏了一个祖先元素，因此页面上不会显示该元素。

Answer 3

来自:visible Selector文档：

  

由于以下几个原因，可以将元素视为隐藏：

     

  
• CSS显示值为none。
  
• 它们是type =“hidden”的表单元素。
  
• 它们的宽度和高度明确设置为0.
  
• 隐藏了一个祖先元素，因此页面上不会显示该元素。
  

检查这些其他条件是否均为真。

Answer 4

所以，答案是：

如果其他人将CLICK事件附加到您之前未发现的对象上，则该事件可能会破坏您尝试使用的任何逻辑。 ;）

唉，这就是这里发生的事情。另一个单击事件已附加到此对象，该对象设置为隐藏其父对象。那是先发射 - 在我的逻辑检查之前看它是否可见。

最后：用户错误。

当出现用户错误问题时，应该存在某种形式的声誉惩罚。 ;）

Answer 5

我有同样的问题。我在 .height() 之后检查了它 切换呼叫。像这样：

// detect jQuery toggle state
if ($('#toggled_element').height() > 0) {
    // do this, it's visible
}
else {
    // do this, it's not visible
}