使用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 相关文章推荐
IE8 浏览器Cookie的处理
Jan 31 Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 Javascript
JQuery中使用.each()遍历元素学习笔记
Nov 08 Javascript
jQuery切换所有复选框选中状态的方法
Jul 02 Javascript
jquery性能优化高级技巧
Aug 24 Javascript
浅析jquery与checkbox的checked属性的问题
Apr 27 Javascript
深入浅析JavaScript中的scrollTop
Jul 11 Javascript
教你如何在Node.js中使用jQuery
Aug 28 Javascript
bootstrap监听滚动实现头部跟随滚动
Nov 08 Javascript
解决ztree搜索中多级菜单展示不全问题
Jul 05 Javascript
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
Oct 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
PHP Array交叉表实现代码
2010/08/05 PHP
PHP中将数组转成XML格式的实现代码
2011/08/08 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
IE iframe的onload方法分析小结
2010/01/07 Javascript
解析jQuery与其它js(Prototype)库兼容共存
2013/07/04 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
为jquery的ajaxfileupload增加附加参数的方法
2014/03/04 Javascript
jQuery实现表格元素动态创建功能
2017/01/09 Javascript
JS设置手机验证码60s等待实现代码
2017/06/14 Javascript
seajs模块压缩问题与解决方法实例分析
2017/10/10 Javascript
JS实现点击链接切换显示隐藏内容的方法
2017/10/19 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
Vue中computed和watch有哪些区别
2020/12/19 Vue.js
[03:17]2016完美“圣”典风云人物:冷冷专访
2016/12/08 DOTA
小米5s微信跳一跳小程序python源码
2018/01/08 Python
对python PLT中的image和skimage处理图片方法详解
2019/01/10 Python
使用 Python 玩转 GitHub 的贡献板(推荐)
2019/04/04 Python
python 寻找离散序列极值点的方法
2019/07/10 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
python pyinstaller打包exe报错的解决方法
2019/11/02 Python
交通安全演讲稿
2014/01/07 职场文书
战友聚会邀请函
2014/01/18 职场文书
竞争性谈判邀请书
2014/02/06 职场文书
马智宇结婚主持词
2014/04/01 职场文书
施工协议书范本
2014/04/22 职场文书
社区巾帼文明岗事迹材料
2014/06/03 职场文书
批评与自我批评发言稿
2014/10/15 职场文书
海南召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2015廉洁自律个人总结
2015/02/14 职场文书
采购员岗位职责范本
2015/04/07 职场文书
优秀志愿者感言
2015/08/01 职场文书
浅谈python数据类型及其操作
2021/05/25 Python
Spring Boot 实现 WebSocket
2022/04/30 Java/Android