有一种奇怪的情况，如果元素被设置为显示:内联jQuery检查可见性失败。

例子:

CSS

#myspan {display: inline;}

jQuery

$('#myspan').show(); // Our element is `inline` instead of `block`
$('#myspan').is(":visible"); // This is false

要解决这个问题，你可以在jQuery中隐藏元素，然后show/hide或toggle()应该可以正常工作。

$('#myspan').hide()
$('#otherElement').on('click', function() {
    $('#myspan').toggle();
});

我认为这与我们HTML中的一个怪癖有关，因为同一页面上的其他地方工作得很好。

我能够解决这个问题的唯一方法是:

if($('#element_id').css('display') == 'none')
{
   // Take element is hidden action
}
else
{
   // Take element is visible action
}

我不知道为什么你的代码不能在chrome上工作，但我建议你使用一些变通办法:

$el.is(':visible') === $el.is(':not(:hidden)');

or

$el.is(':visible') === !$el.is(':hidden');  

如果你确定jQuery在chrome中会给你一些不好的结果，你可以依靠css规则检查:

if($el.css('display') !== 'none') {
    // i'm visible
}

另外，您可能希望使用最新的jQuery，因为它可能修复了旧版本的bug。

如果你读过jquery文档，你会发现有很多不可见/隐藏的原因:

它们的CSS显示值为none。

它们是带有type="hidden"的表单元素。

它们的宽度和高度显式地设置为0。

祖先元素是隐藏的，因此该元素不会显示在页面上。

http://api.jquery.com/visible-selector/

下面是一个带有一个可见元素和一个隐藏元素的jsfiddle小例子:

http://jsfiddle.net/tNjLb/

有一种奇怪的情况，如果元素被设置为显示:内联jQuery检查可见性失败。

例子:

CSS

#myspan {display: inline;}

jQuery

$('#myspan').show(); // Our element is `inline` instead of `block`
$('#myspan').is(":visible"); // This is false

要解决这个问题，你可以在jQuery中隐藏元素，然后show/hide或toggle()应该可以正常工作。

$('#myspan').hide()
$('#otherElement').on('click', function() {
    $('#myspan').toggle();
});

我需要使用可视性:hidden而不是display:none，因为可见性需要事件，而显示不需要。

因此写入。attr('visibility') === "visible"