如果一个项是隐藏项的子项，is(":visible")将返回true，这是不正确的。

我只是通过添加“display:inherit”到子项来修复这个问题。这将为我解决这个问题:

<div class="parent">
   <div class="child">
   </div>
<div>

和CSS:

.parent{
   display: hidden;
}
.child{
   display: inherit;
}

现在可以通过改变父元素的可见性来有效地打开和关闭项目，$(element).is(":visible")将返回父元素的可见性

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

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

一般来说，当我的对象的父对象被隐藏时，我就会遇到这种情况。 例如，当HTML是这样的:

    <div class="div-parent" style="display:none">
        <div class="div-child" style="display:block">
        </div>
    </div>

如果你问child是否可见，比如:

    $(".div-child").is(":visible");

它将返回false，因为它的父元素不可见，所以div也不可见。

这是来自jquery.js的一段代码，当is(":visible")被调用时执行:

if (jQuery.expr && jQuery.expr.filters){

    jQuery.expr.filters.hidden = function( elem ) {
        return ( elem.offsetWidth === 0 && elem.offsetHeight === 0 ) || (!jQuery.support.reliableHiddenOffsets && ((elem.style && elem.style.display) || jQuery.css( elem, "display" )) === "none");
    };

    jQuery.expr.filters.visible = function( elem ) {
        return !jQuery.expr.filters.hidden( elem );
    };
}

如您所见，它使用的不仅仅是CSS display属性。它还取决于元素内容的宽度和高度。因此，要确保元素有一定的宽度和高度。为此，你可能需要将display属性设置为"inline-block"或"block"

我不知道为什么你的代码不能在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。

我在父样式上添加了next样式，.is(":visible")起作用了。

显示:inline-block;