jQuery 如何判断一个元素是否可见

jQuery 如何判断一个元素是否可见

2012年04月10日 | IT点滴 | 浏览 22,636 | 暂无评论      

jQuery 可以很容易地确定一个元素是可见的或是隐藏的，然后分别做不同的处理。如：我想根据某 div 是否可见，在按钮上显示不同的文字和图标。可以这样实现：

方法一：

1. $('#para_div button').click(function() {   
2.      if($(this).next().is(":visible")) {               
3.         //$(this).html('显示');   
4.         $(this).css({"background":"url(/images/btn_arrow_down.png) no-repeat"});   
5.      }    
6.      else  {   
7.         //$(this).html('隐藏');     
8.         $(this).css({"background":"url(/images/btn_arrow_up.png) no-repeat"});       
9.      }      
10.     $(this).next().slideToggle('fast');   
11.   });  

方法二：

1. $('#para_div button').click(function() {   
2.      if($(this).next().css('display') == 'none') {               
3.         //$(this).html('隐藏');     
4. 　$(this).css({"background":"url(/images/btn_arrow_up.png) no-repeat"});   
5.      }    
6.      else{   
7.         //$(this).html('显示');   
8. 　$(this).css({"background":"url(/images/btn_arrow_down.png) no-repeat"});      
9.      }      
10.     $(this).next().slideToggle('fast');   
11. });  

方法三：

1. $('#para_div button').click(function() {   
2.   var $cn = $(this).next();   
3.   //$(this).html(($cn.is(":visible")) ? '显示' : '隐藏');   
4. (this).css(($cn.is(":visible")) ?    
5. {"background":"url(http://hykloud.com/wp-content/themes/HotNewspro/images/btn_arrow_down.png) no-repeat"} :    
6. {"background":"url(http://hykloud.com/wp-content/themes/HotNewspro/images/btn_arrow_up.png) no-repeat"});   
7.   $cn.toggle('fast');           
8. });  

应用演示：

点击右边的箭头显示/隐藏答案：
什么是中国的网络防火长城？

参考:
1. How to tell if an element is visible with jQuery
2. How do you test if something is hidden with jQuery?