关于jquery和zepto.js判断元素的可见性并显示或隐藏总结

一、使用jquery控制div的显示与隐藏

使用jquery控制div的显示与隐藏，一句话就能搞定，例如：

1.$("#id").show()表示为display：block，

   $("#id").hide()表示为display:none;

2.$("#id").toggle()切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，则切换为可见的。

3.$("#id").css('display','none');//隐藏

   $("#id").css('display','block');//显示

   或者

   $("#id")[0].style.display='none';

　　display=none 控制对象的隐藏
　　display=block控制对象的显示

4.$("#id").css('visibility','hidden');//元素隐藏

   $("#id").css('visibility','visible');//元素显示

CSS visibility 属性规定元素是否可见。
visible　元素可见。 
hidden　元素不可见。 
collapse　在表格元素中使用时，此值可删除一行或一列，但它不影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。 
inherit　从父元素继承 visibility 属性的值。

二、使用jquery判断元素是否隐藏

// jQuery("#tanchuBg").css("display")  
// jQuery("#tanchuBg").is(":visible")  
// jQuery("#tanchuBg").is(":hidden")  

三、zepto.js判断元素的可见性并显示或隐藏

因为Zepto.js不支持JQuery的jQuery("#tanchuBg").is(":hidden")  和jQuery("#tanchuBg").is(":visible") 。

我见网上大多数都说用以下方法，但是测试完还是不行，以为我获取元素.css(“visibility”) 返回的都是visible。（以下为摘取网上的方法）

(1)可以检查显示器的CSS属性：css(“display”) == “block”

(2)可以检查可见：可见/隐藏：css(“visibility”) == “visible”

例子如下：

//评价隐藏-显示
$('.comment-btn').click(function(){
if($('.hideComment').css("display") == "none"){
 
$('.hideComment').show();
$('.btnarrow').removeClass('btnarrowtop');
$('.btnarrow').addClass('btnarrowdown');
}else if($('.hideComment').css("display") == "block"){
 
$('.hideComment').hide();
$('.btnarrow').addClass('btnarrowtop');
$('.btnarrow').removeClass('btnarrowdown');
}
 
});

---------------------------------------------------------------------------------------------

本人结合上述方法总结如下：

$(".item_father").on("click",function () {
        if($(this).next("table").css("visibility") == "visible"){
            $(this).next("table").css("visibility","hidden");
            $(this).next("table").hide();
        }else{
            $(this).next("table").css("visibility","visible");
            $(this).next("table").show();
        }

 })

必须在方法内手动设置css 属性visibility的值。

-----------------------------------------------------------------------------

当然了 JQuery和Zepto都提供了 $("div").toggle(); 方法。这个方法可以直接将显示转为隐藏或将隐藏转为显示。