本文主要是介绍关于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(); 方法。这个方法可以直接将显示转为隐藏或将隐藏转为显示。
这篇关于关于jquery和zepto.js判断元素的可见性并显示或隐藏总结的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
