如何在我的情况下检查元素是否可见？

Question

在我的案例中,我有一个奇怪的问题.

我有隐藏的东西,但jquery找不到它.

HTML

<div id='test'>
    <h3>title here</h3>
</div>

CSS

#test h3 {
   visibility: hidden;
}

JS

if (('#test h3').is(':visible')) {
    alert('visible');
}

我不应该得到警报框,因为我的h3标签被隐藏但警报框不断弹出.任何人都可以帮我这个奇怪的问题吗？非常感谢!

Answer 1

由于隐藏可见性仍然占用空间,jQuery认为它们是可见的.

以下是文档的引用:

如果元素占用文档中的空间,则认为元素是可见的.可见元素的宽度或高度大于零.

具有visibility:hidden或被opacity: 0认为可见的元素,因为它们仍然占用布局中的空间.

如果要检查元素visibillity是否未设置为hidden,请使用以下命令:

if ( $('#test h3').css('visibility') == 'visible' ) {
    alert('visible');
}

要检查祖先,请使用以下命令:

var visible = true;

$('#test h3').parents().addBack().each(function() {
    if ( $.css(this, 'visibility') != 'visible' ) return visible = false;
});

if ( visible ) {
    // do whatever...
}

您可以将所有内容抽象为可重用的过滤器表达式:

jQuery.expr[':']['visible-real'] = function(el) {

    var visible = true;

    $(el).parents().addBack().each(function () {
        if ( $.css(this, 'visibility') != 'visible' ) return visible = false;
    });

    return visible;
};

然后,您可以在需要时使用它,如下所示:

if ( $('#test h3').is(':visible-real') ) {
    alert('visible');
}

这是小提琴:http://jsfiddle.net/3LGm7/