一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

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

时间:2015-03-31 编辑:简简单单 来源:一聚教程网

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

$(document).ready(function(e) {
    if($('#d').is(':hidden')){
  alert("yes");
 }else{
  alert("no");
 }
});

方法一:

$('#para_div button').click(function() {   

     if($(this).next().is(":visible")) {               

        //$(this).html('显示');   

        $(this).css({"background":"url(/images/btn_arrow_down.png) no-repeat"});   

     }    

     else  {   

        //$(this).html('隐藏');     

        $(this).css({"background":"url(/images/btn_arrow_up.png) no-repeat"});       

     }      

    $(this).next().slideToggle('fast');   

  });

方法二:

$('#para_div button').click(function() {   

     if($(this).next().css('display') == 'none') {               

        //$(this).html('隐藏');     

 $(this).css({"background":"url(/images/btn_arrow_up.png) no-repeat"});   

     }    

     else{   

        //$(this).html('显示');   

 $(this).css({"background":"url(/images/btn_arrow_down.png) no-repeat"});      

     }      

    $(this).next().slideToggle('fast');   

});
$('#para_div button').click(function() {   


  var $cn = $(this).next();   


  //$(this).html(($cn.is(":visible")) ? '显示' : '隐藏');   


(this).css(($cn.is(":visible")) ?    


{"background":"url(/themes/HotNewspro/images/btn_arrow_down.png) no-repeat"} :    


{"background":"url(/themes/HotNewspro/images/btn_arrow_up.png) no-repeat"});   


  $cn.toggle('fast');           


});

 

热门栏目