如何使用 . hide () 、.show () 或.toggle () 来切换元素的可见度 ?

如果元素可见或隐藏, 我如何测试 ?


当前回答

人们可以简单地使用隐藏或可见属性,例如:

$('element:hidden')
$('element:visible')

或您可以简化相同内容如下。

$(element).is(":visible")

其他回答

由于问题只涉及一个要素,本守则可能更适合:

// Checks CSS content for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");

// The same works with hidden
$(element).is(":hidden");

它与twern的建议相同,但适用于一个单一要素;它与jquery faq中推荐的算法相符。

我们用 jquery's is () 来检查选中元素与其它元素、 选择器或任何 jquery 对象的对比。 此方法沿 dom 元素绕行查找匹配, 满足已传递参数 。 如果匹配, 返回为真, 否则返回为假 。

我搜索了这个, 没有一个答案 是正确的我的情况, 所以我创造了一个功能, 返回假的,如果一个人的眼睛看不到元素

jQuery.fn.extend({
  isvisible: function() {
    //
    //  This function call this: $("div").isvisible()
    //  Return true if the element is visible
    //  Return false if the element is not visible for our eyes
    //
    if ( $(this).css('display') == 'none' ){
        console.log("this = " + "display:none");
        return false;
    }
    else if( $(this).css('visibility') == 'hidden' ){
        console.log("this = " + "visibility:hidden");   
        return false;
    }
    else if( $(this).css('opacity') == '0' ){
        console.log("this = " + "opacity:0");
        return false;
    }   
    else{
        console.log("this = " + "Is Visible");
        return true;
    }
  }  
});

这是内部拼写如何解决这个问题的:

jQuery.expr.pseudos.visible = function( elem ) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

如果您不使用 jquery, 你可以只是利用这个代码 并把它变成你自己的功能:

function isVisible(elem) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

只要元素是可见的, 便会返回真实状态 。

有很多方法可以检查元素是否可见或隐藏在jquery中。

demo demo html 例如引用

<div id="content">Content</div>
<div id="content2" style="display:none">Content2</div>

使用可见度过滤选择器$( 元素: 隐藏) 或$( 元素: 可见)

$( 元素: 隐藏 ) : 选择隐藏的所有元素 。 例如 : $( 内容 2: 隐藏 ) show (); $( 元素: 可见 ) : 选择可见的所有元素 。 例如 : $( 内容: 可见 ) . css ( “ 颜色 ” , “ ee ” ) ;

见http://api.jquery.com/类/选择者/visibility-filter-selectors/

正在过滤

    Example:
       $('#content').is(":visible").css('color', '#EEE');

    Or checking condition
    if ($('#content').is(":visible")) {
         // Perform action
    }

见http://api.jquery.com/is/

if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}