使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)


Posted in Javascript onSeptember 01, 2016

这是一个示例:

<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").toggle(); //toggle()方法进行显示隐藏交互事件,如果显示的就进行隐藏,如果是隐藏的就显示
});
$(".btn2").toggle(2000,function(){
$(".div2").toggle(); //callback
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Toggle</button>
<button class="btn2">Toggle2</button>
<div class="div1">http://www.cnblogs.com/sosoft/</div>
<div class="div2" style="display:none">柔成</div>
</body>
</html>

  示例中用到的toggle()方法:

toggle() 方法切换元素的可见状态。如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。

语法$(selector).toggle(speed,callback,switch)

使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)

PS:该效果适用于通过 jQuery 隐藏的元素,或在 CSS 中声明 display:none 的元素(但不适用于 visibility:hidden 的元素)。

以上所述是小编给大家介绍的使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js获得当前系统日期时间的方法
May 06 Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 Javascript
Node.js程序中的本地文件操作用法小结
Mar 06 Javascript
javascript 解决浏览器不支持的问题
Sep 24 Javascript
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
vue双花括号的使用方法 附练习题
Nov 07 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
May 10 Javascript
layui实现点击按钮给table添加一行
Aug 10 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
Aug 13 Javascript
解决$store.getters调用不执行的问题
Nov 08 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 Javascript
javascript实现移动端轮播图
Dec 09 Javascript
AngularJs bootstrap搭载前台框架——基础页面
Sep 01 #Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 #Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
Sep 01 #Javascript
AngularJs bootstrap搭载前台框架——准备工作
Sep 01 #Javascript
JS仿hao123导航页面图片轮播效果
Sep 01 #Javascript
javaScript如何跳出多重循环break、continue
Sep 01 #Javascript
AngularJs bootstrap详解及示例代码
Sep 01 #Javascript
You might like
PHP4在Windows2000下的安装
2006/10/09 PHP
PHP5中使用PDO连接数据库的方法
2010/08/01 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
jquery form 加载数据示例
2014/04/21 Javascript
JavaScript遍历求解数独问题的主要思路小结
2016/06/12 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
bootstrap table表格插件使用详解
2017/05/08 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
基于better-scroll 实现歌词联动功能的代码
2020/05/07 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
Python生成随机数的方法
2014/01/14 Python
python基础教程之自定义函数介绍
2014/08/29 Python
浅谈python中的数字类型与处理工具
2017/08/02 Python
PyQt5 QSerialPort子线程操作的实现
2018/04/21 Python
pandas使用get_dummies进行one-hot编码的方法
2018/07/10 Python
python实现的汉诺塔算法示例
2019/10/23 Python
基于matplotlib xticks用法详解
2020/04/16 Python
Python timeit模块原理及使用方法
2020/10/10 Python
Python中return函数返回值实例用法
2020/11/19 Python
HTML5之语义标签介绍
2016/07/07 HTML / CSS
个人求职简历的自我评价
2013/10/19 职场文书
高中毕业的自我鉴定
2013/12/09 职场文书
护士实习求职信
2014/06/22 职场文书
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL
Python Pandas pandas.read_sql_query函数实例用法分析
2021/06/21 Python
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python
python中的random模块和相关函数详解
2022/04/22 Python