jQuery判断一个元素是否可见的方法

本文实例讲述了jQuery判断一个元素是否可见的方法。分享给大家供大家参考。具体如下：

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

方法一：

?

1 2 3 4 5 6 7 8 9 10 11

$( '#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' );    });

方法二：

?

1 2 3 4 5 6 7 8 9 10 11

$( '#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' );  });

方法三：

?

1 2 3 4 5 6 7 8

$( '#para_div button' ).click( function () {    var $cn = $( this ).next();    //$(this).html(($cn.is(":visible")) ? '显示' : '隐藏');  ( this ).css(($cn.is( ":visible" )) ?  { "background" : "url(images/btn_arrow_down.png) no-repeat" } :  { "background" : "url(images/btn_arrow_up.png) no-repeat" });    $cn.toggle( 'fast' ); });