使用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的public、private和privileged模式
Dec 28 Javascript
jQuery控制输入框只能输入数值的小例子
Mar 20 Javascript
JavaScript静态类型检查工具FLOW简介
Jan 06 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 Javascript
jquery实现鼠标悬浮停止轮播特效
Aug 20 Javascript
Angular 路由route实例代码
Jul 12 Javascript
vue.js表格组件开发的实例详解
Oct 12 Javascript
jQuery使用Layer弹出层插件闪退问题
Dec 22 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 Javascript
React性能优化系列之减少props改变的实现方法
Jan 17 Javascript
vue下载二进制流图片操作
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 sprintf()函数用例解析
2011/05/18 PHP
php UNIX时间戳用法详解
2017/02/16 PHP
PHP如何通过表单直接提交大文件详解
2019/01/08 PHP
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
2012/10/11 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
2015/03/21 Javascript
Javascript实现的Map集合工具类完整实例
2015/07/31 Javascript
浅谈JavaScript 浏览器对象
2016/06/03 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
2017/01/05 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
JS库 Highlightjs 添加代码行号的实现代码
2017/09/13 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
用python写的一个wordpress的采集程序
2016/02/27 Python
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
深入理解Python 关于supper 的 用法和原理
2018/02/28 Python
python中format()函数的简单使用教程
2018/03/14 Python
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
Python编程学习之如何判断3个数的大小
2019/08/07 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
Python matplotlib实时画图案例
2020/04/23 Python
统计每一学生的平均成绩
2014/06/06 面试题
大一新生军训时的自我评价分享
2013/12/05 职场文书
社区学习十八大感想
2014/01/22 职场文书
大学生水果店创业计划书
2014/01/28 职场文书
如何撰写岗位职责
2014/02/01 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
树转促学习心得体会
2014/09/10 职场文书
车辆委托书范本
2014/10/05 职场文书
代领报检证委托书范本
2014/10/11 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
公务员政审材料
2014/12/23 职场文书
2015大学迎新标语
2015/07/16 职场文书
MySQL通过binlog恢复数据
2021/05/27 MySQL
Python 快速验证代理IP是否有效的方法实现
2021/07/15 Python