使用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 相关文章推荐
jquery遍历input取得input的name
Apr 27 Javascript
jQuery LigerUI 使用教程表格篇(1)
Jan 18 Javascript
node.js学习总结之调式代码的方法
Jun 25 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
Dec 08 Javascript
Javascript计算二维数组重复值示例代码
Dec 18 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
May 24 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
利用angular、react和vue实现相同的面试题组件
Feb 19 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
Jun 13 Javascript
jquery实现的分页显示功能示例
Aug 23 jQuery
原生js实现移动小球(碰撞检测)
Dec 17 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
网友原创的PHP模板类代码
2008/09/07 PHP
php 设计模式之 单例模式
2008/12/19 PHP
php数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
解析php中获取系统信息的方法
2013/06/25 PHP
页面乱码问题的根源及其分析
2013/08/09 PHP
javascript some()函数用法详解
2014/11/13 PHP
php中foreach结合curl实现多线程的方法分析
2016/09/22 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
js注意img图片的onerror事件的分析
2011/01/01 Javascript
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
基于JavaScript实现弹出框效果
2016/02/19 Javascript
vue 实现的树形菜的实例代码
2018/03/19 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
2020/01/18 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
vue实现放大镜效果
2020/09/17 Javascript
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
Python实现多线程HTTP下载器示例
2017/02/11 Python
python算法表示概念扫盲教程
2017/04/13 Python
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
.NET方向面试题
2014/11/20 面试题
软件测试面试题
2015/10/21 面试题
信息管理专业推荐信
2013/10/29 职场文书
小区消防演习方案
2014/02/21 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
大学生社会实践感想
2015/08/11 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
2019感恩宣传标语!
2019/07/05 职场文书
Python爬虫基础讲解之请求
2021/05/13 Python
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js
javascript的setTimeout()使用方法总结
2021/11/20 Javascript