使用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 相关文章推荐
javascript的事件描述
Sep 08 Javascript
调用HttpHanlder的几种返回方式小结
Dec 20 Javascript
js 删除数组的几种方法小结
Feb 21 Javascript
自写的jQuery异步加载数据添加事件
May 15 Javascript
JavaScript中数据类型转换总结
Dec 25 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 Javascript
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
webpack 1.x升级过程中的踩坑总结大全
Aug 09 Javascript
基于js中style.width与offsetWidth的区别(详解)
Nov 12 Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 Javascript
浅谈vue后台管理系统权限控制思考与实践
Dec 19 Javascript
element-ui中el-upload多文件一次性上传的实现
Dec 02 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
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
php array_search() 函数使用
2010/04/13 PHP
php中如何判断一个网页请求是ajax请求还是普通请求
2013/08/10 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
javascript hashtable 修正版 下载
2010/12/30 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
2015/03/31 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
js实现Select头像选择实时预览代码
2015/08/17 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
javascript实现tab切换的四种方法
2015/11/05 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
2016/06/08 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
2020/10/29 Javascript
[04:16]完美世界DOTA2联赛PWL S2 集锦第一期
2020/11/23 DOTA
Python base64编码解码实例
2015/06/21 Python
Python科学计算之Pandas详解
2017/01/15 Python
Python3.6 Schedule模块定时任务(实例讲解)
2017/11/09 Python
kafka-python批量发送数据的实例
2018/12/27 Python
Python3 单行多行万能正则匹配方法
2019/01/07 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
python实现大文件分割与合并
2019/07/22 Python
python2.7实现复制大量文件及文件夹资料
2019/08/31 Python
python实现三壶谜题的示例详解
2020/11/02 Python
Django如何继承AbstractUser扩展字段
2020/11/27 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
美国在线鲜花速递:ProFlowers
2017/01/05 全球购物
美国排名第一的泳池用品直接来源:In The Swim
2019/09/23 全球购物
小学运动会表扬稿
2014/01/19 职场文书
2014年爱国卫生工作总结
2014/11/22 职场文书
国庆节新闻稿
2015/07/17 职场文书
在pycharm中无法import所安装的库解决方案
2021/05/31 Python
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android