如何使元素的可见度.hide(), .show(),或.toggle()?

如果一个元素是visiblehidden?


当前回答

这里有一个永久有条件的表达式 来检查元素的状态 然后切换它:

$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });

其他回答

$('someElement').on('click', function(){ $('elementToToggle').is(':visible')

这些答案都没有涉及我所理解的问题,这就是我所寻求的,"我如何处理那些visibility: hidden?"两者都不是:visible:hidden将处理此事宜, 因为他们都在查找文档中的显示。 就我所能确定的情况来看, 没有选择器可以处理 CSS 可见度 。 以下是我如何解决这个问题的( 标准 jQuery 选择器, 可能有更压缩的语法 ) :

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});

您可以使用hidden选择器 :

// Matches all elements that are hidden
$('element:hidden')

还有visible选择器 :

// Matches all elements that are visible
$('element:visible')

您也可以使用 plain JavaScript 来做到这一点 :

function isRendered(domObj) {
    if ((domObj.nodeType != 1) || (domObj == document.body)) {
        return true;
    }
    if (domObj.currentStyle && domObj.currentStyle["display"] != "none" && domObj.currentStyle["visibility"] != "hidden") {
        return isRendered(domObj.parentNode);
    } else if (window.getComputedStyle) {
        var cs = document.defaultView.getComputedStyle(domObj, null);
        if (cs.getPropertyValue("display") != "none" && cs.getPropertyValue("visibility") != "hidden") {
            return isRendered(domObj.parentNode);
        }
    }
    return false;
}

注:

  1. 到处工作

  2. 嵌套元素的工程

  3. CSS 和内嵌样式的工作

  4. 不需要框架

if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // 'element' is hidden
}

上述方法不考虑父母亲的可见度。为了也考虑父母的可见度,您应该使用.is(":hidden").is(":visible").

例如,

<div id="div1" style="display:none">
  <div id="div2" style="display:block">Div2</div>
</div>

上述方法将考虑div2可见时可见:visible。但是,在很多情况下,特别是当您需要找到隐藏的父(母)是否发现任何错误时,上述情况也许有用,因为在这种情况下,隐藏的母(母)之间是否有错误。:visible不会工作。