Jquery判断元素是否隐藏：display属性状态值

很多时候，我们都要判断元素当前是否处于显示或隐藏状态。Jquery通过判断元素display属性状态值来实现“判断当前操作元素是否显示还是隐藏”，实现方法主要使用Jquery提供的基本选择器 :visible 或 :hidden方法。

点击下面的“运行”按钮，在打开的页面中可多次点击右上角按钮，查看效果：

<style type="text/css">
.run-button{width:100px; height:38px;display:block;position:absolute;right:70%; top:200px;}
.test{ width:100px; height:100px; color:#000; border:1px blue solid;}
.tips{color:#f00;}
</style>
<script type="text/javascript">
$(function(){
$(".run-button").focus().click(function(){
if($('.test').is(':visible')){
$('.test').hide().next().text('注意:div被隐藏了！');
}else{
$('.test').show().next().text('div显示，能看见');
}
//用基本选择器 :hidden 也行
// if($('.test').is(':hidden')){
// $('.test').show().next().text('div显示，能看见');
// }else{
// $('.test').hide().next().text('注意:div被隐藏了！');
// }
})
})
</script>
<p style="padding:8px 0;">
说明：多次点击右上角按钮，使div层在显示 、隐藏两者状态间自由切换
</p>
<p>
<input type="button" value="点击测试" class="run-button"/>
</p>
<div class="test">
该div默认显示
</div>
<p>
<span class="tips">注意：div当前显隐藏状态</span>
</p>

当然也可以通过jq读取CSS样式中的display值来判断当前display属性状态值,但还是推荐使用上面的方法！