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 相关文章推荐
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
Dec 25 Javascript
PNG背景在不同浏览器下的应用
Jun 22 Javascript
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
JQuery下关于$.Ready()的分析
Dec 13 Javascript
Script标签与访问HTML页面详解
Jan 10 Javascript
js解决select下拉选不中问题
Oct 14 Javascript
详解Bootstrap插件
Apr 25 Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 Javascript
简单谈谈React中的路由系统
Jul 25 Javascript
JS合并两个数组的3种方法详解
Oct 24 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 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
阿拉伯的咖啡与水烟
2021/03/03 咖啡文化
如何使用PHP获取网络上文件
2006/10/09 PHP
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
关于PHPDocument 代码注释规范的总结
2013/06/25 PHP
基于php使用memcache存储session的详解
2013/06/25 PHP
浅析php面向对象public private protected 访问修饰符
2013/06/30 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
去除链接虚线全面分析总结
2006/08/15 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
JavaScript实现网页加载进度条代码超简单
2015/09/21 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
javascript html5摇一摇功能的实现
2016/04/19 Javascript
jQuery中fadein与fadeout方法用法示例
2016/09/16 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
2017/01/20 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
2017/03/06 Javascript
Vue如何从1.0迁移到2.0
2017/10/19 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
Python中绑定与未绑定的类方法用法分析
2016/04/29 Python
Python lxml解析HTML并用xpath获取元素的方法
2019/01/02 Python
Python多线程原理与用法实例剖析
2019/01/22 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
python 基于opencv 绘制图像轮廓
2020/12/11 Python
创业计划书的主要内容有哪些
2014/01/29 职场文书
工作会议主持词
2014/03/17 职场文书
机关节能减排实施方案
2014/03/17 职场文书
《晚上的太阳》教学反思
2014/04/23 职场文书
2014镇党委班子对照检查材料思想汇报
2014/09/23 职场文书
开业典礼致辞
2015/07/29 职场文书
2019入党申请书范文3篇
2019/08/21 职场文书