使用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 动态调整图片尺寸实现代码
Dec 28 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 Javascript
js加载之使用DOM方法动态加载Javascript文件
Nov 08 Javascript
JQuery each打印JS对象的方法
Nov 13 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
May 11 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
JavaScript数据类型学习笔记
Jan 25 Javascript
AngularJS API之copy深拷贝详解及实例
Sep 14 Javascript
vuejs事件中心管理组件间的通信详解
Aug 09 Javascript
JavaScript递归算法生成树形菜单
Aug 15 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
Aug 22 Javascript
node(koa2) web应用模块介绍详解
Mar 29 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 简单日历实现代码
2009/10/28 PHP
php中stream(流)的用法
2014/03/25 PHP
php强制运行广告的方法
2014/12/01 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
javascript编程起步(第六课)
2007/02/27 Javascript
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
解决jquery的.animate()函数在IE6下的问题
2010/12/03 Javascript
JavaScript 大数据相加的问题
2011/08/03 Javascript
密码强度检测效果实现原理与代码
2013/01/04 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
2013/04/26 Javascript
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
JavaScript包装对象使用介绍
2013/08/29 Javascript
jquery基本选择器匹配多个元素的实现方法
2016/09/05 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
vue.js父组件使用外部对象的方法示例
2017/04/25 Javascript
Web制作验证码功能实例代码
2017/06/19 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
vue底部加载更多的实例代码
2018/06/29 Javascript
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
Python中zip()函数用法实例教程
2014/07/31 Python
python条件变量之生产者与消费者操作实例分析
2017/03/22 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
Python Multiprocessing多进程 使用tqdm显示进度条的实现
2019/08/13 Python
Django框架安装方法图文详解
2019/11/04 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
AVON雅芳官网:世界上最大的美容化妆品公司之一
2016/11/02 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
护士演讲稿范文
2014/01/05 职场文书
鲁迅故居导游词
2015/02/05 职场文书
水电工岗位职责
2015/02/14 职场文书
宾馆安全管理制度
2015/08/06 职场文书
JavaScript ES6的函数拓展
2022/01/18 Javascript
Vue ECharts实现机舱座位选择展示功能
2022/05/15 Vue.js