夏日博客

A-A+

jquery判断元素是否可见4个例子

2016年01月10日 前端设计 暂无评论 阅读 5 views 次

jquery判断元素是否可见方法有很多了,我们可以通过各种系统自带的函数来进行判断区别,下面整理了几个例子,我们一起来看看吧.

使用is方法：is(':hidden')例如:

  1. $(document).ready(function(e) {  
  2.     if($('#d').is(':hidden')){  
  3.   alert("yes");  
  4.  }else{  
  5.   alert("no");  
  6.  }  
  7. });  
  8. <div style="width:100px;height:100px;background-color:#099" id="d"></div>  

方法一:

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

方法二:

  1. $('#para_div button').click(function() {     
  2.    
  3.      if($(this).next().css('display') == 'none') {                 
  4.    
  5.         //$(this).html('隐藏');       
  6.    
  7. 　$(this).css({"background":"url(/images/btn_arrow_up.png) no-repeat"});     
  8.    
  9.      }      
  10.    
  11.      else{     
  12.    
  13.         //$(this).html('显示');     
  14.    
  15. 　$(this).css({"background":"url(/images/btn_arrow_down.png) no-repeat"});        
  16.    
  17.      }        
  18.    
  19.     $(this).next().slideToggle('fast');     
  20.    
  21. });  
  22.   
  23. $('#para_div button').click(function() {     
  24.    
  25.    
  26.   var $cn = $(this).next();     
  27.    
  28.    
  29.   //$(this).html(($cn.is(":visible")) ? '显示' : '隐藏');     
  30.    
  31.    
  32. (this).css(($cn.is(":visible")) ?      
  33.    
  34. {"background":"url(/themes/HotNewspro/images/btn_arrow_down.png) no-repeat"} :      
  35.    
  36. {"background":"url(/themes/HotNewspro/images/btn_arrow_up.png) no-repeat"});     
  37.    
  38.   $cn.toggle('fast');             
  39.    
  40. });  
标签：

给我留言