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


Posted in Javascript onJune 05, 2015

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

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

方法一:

$('#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(images/btn_arrow_down.png) no-repeat"} :  
{"background":"url(images/btn_arrow_up.png) no-repeat"});  
 $cn.toggle('fast');
});

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
在IE6下发生Internet Explorer cannot open the Internet site错误
Jun 21 Javascript
学习并汇集javascript匿名函数
Nov 25 Javascript
js 回车提交表单两种实现方法
Dec 31 Javascript
可在线编辑网页文字效果代码(单击)
Mar 02 Javascript
关于JavaScript中name的意义冲突示例介绍
May 29 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 Javascript
javascript动态添加checkbox复选框的方法
Dec 23 Javascript
JS运动相关知识点小结(附弹性运动示例)
Jan 08 Javascript
JavaScript中数组添加值和访问值常见问题
Feb 06 Javascript
JS倒计时实例_天时分秒
Aug 22 Javascript
细述Javascript的加法运算符的具体使用
Oct 18 Javascript
javascript 内存模型实例详解
Apr 18 Javascript
jquery超简单实现手风琴效果的方法
Jun 05 #Javascript
js+html5实现canvas绘制圆形图案的方法
Jun 05 #Javascript
js+html5实现canvas绘制简单矩形的方法
Jun 05 #Javascript
js+html5实现canvas绘制镂空字体文本的方法
Jun 05 #Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
Jun 05 #Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
Jun 05 #Javascript
JavaSacript中charCodeAt()方法的使用详解
Jun 05 #Javascript
You might like
海贼王:最美的悬赏令!
2020/03/02 日漫
可以在线执行PHP代码包装修正版
2008/03/15 PHP
php实现利用phpexcel导出数据
2013/08/24 PHP
Codeigniter+PHPExcel实现导出数据到Excel文件
2014/06/12 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
js动态添加事件并可传参数示例代码
2013/10/21 Javascript
javascript中expression的用法整理
2014/05/13 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
原生js实现查询天气小应用
2016/12/09 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
2017/12/27 Javascript
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
jQuery Migrate 插件用法实例详解
2019/05/22 jQuery
mpvue微信小程序的接口请求fly全局拦截代码实例
2019/11/13 Javascript
viewer.js实现图片预览功能
2020/06/24 Javascript
python随机生成指定长度密码的方法
2015/04/04 Python
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
python操作文件的参数整理
2019/06/11 Python
python序列化与数据持久化实例详解
2019/12/20 Python
python实现图像拼接
2020/03/05 Python
python中Mako库实例用法
2020/12/31 Python
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
浅谈基于HTML5的在线视频播放方案
2016/02/18 HTML / CSS
大学生自我鉴定
2013/12/08 职场文书
党员岗位承诺书
2014/03/25 职场文书
行政监察建议书
2014/05/19 职场文书
开学典礼策划方案
2014/05/28 职场文书
税务职业生涯规划书范文
2014/09/16 职场文书
小学生差生评语
2014/12/29 职场文书
教师节座谈会主持词
2015/07/03 职场文书
会计专业自荐信范文
2019/05/22 职场文书
golang日志包logger的用法详解
2021/05/05 Golang
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL
教你如何用Python实现人脸识别(含源代码)
2021/06/23 Python