现在的位置: 首页IT点滴>正文
jQuery 如何判断一个元素是否可见
2012年04月10日 | IT点滴 | 浏览 20,402 | 暂无评论

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. });  

应用演示:

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

欢迎留言

定制个性头像