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认为它们可见。

以下是the docs的引用：

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

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...
}

您可以将所有内容抽象为可重复使用的filter expression：

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/

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

1 个答案: