使用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 相关文章推荐
HTML中不支持静态Expando的元素的问题
Mar 08 Javascript
filemanage功能中用到的common.js
Apr 08 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
Aug 30 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
Jan 15 Javascript
js用闭包遍历树状数组的方法
Mar 19 Javascript
js验证真实姓名与身份证号,手机号的简单实例
Jul 18 Javascript
JavaScript 对象详细整理总结
Sep 29 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
Jan 17 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
Feb 20 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
解决修复npm安装全局模块权限的问题
May 17 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
May 26 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
重置版宣传动画
2020/04/09 魔兽争霸
php学习笔记 面向对象中[接口]与[多态性]的应用
2011/06/16 PHP
PHP爆绝对路径方法收集整理
2012/09/17 PHP
php中怎么搜索相关联数组键值及获取之
2013/10/17 PHP
php foreach循环中使用引用的问题
2013/11/06 PHP
php使用iconv中文截断问题的解决方法
2015/02/11 PHP
php正则替换处理HTML页面的方法
2015/06/17 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
php+html5实现无刷新图片上传教程
2016/01/22 PHP
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
PHP中echo与print区别点整理
2021/03/09 PHP
asp.net和asp下ACCESS的参数化查询
2008/06/11 Javascript
Javascript 函数对象的多重身份
2009/06/28 Javascript
javascript 当前日期加(天、周、月、年)
2009/08/09 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
2010/12/02 Javascript
JavaScript 的继承
2011/10/01 Javascript
js生成随机数之random函数随机示例
2013/12/20 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
基于javascript编写简单日历
2016/05/02 Javascript
JS版微信6.0分享接口用法分析
2016/10/13 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
微信小程序自定义底部弹出框
2020/11/16 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
JavaScript Dom实现轮播图原理和实例
2021/02/19 Javascript
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
python实现指定字符串补全空格的方法
2015/04/30 Python
Python中字符串的常见操作技巧总结
2016/07/28 Python
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
python获取文件真实链接的方法,针对于302返回码
2018/05/14 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
解决c++调用python中文乱码问题
2020/07/29 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
2014年卫生院工作总结
2014/12/03 职场文书