使用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 相关文章推荐
js控制的遮罩层实例介绍
May 29 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
Aug 02 Javascript
js表单验证实例讲解
Mar 31 Javascript
JS验证图片格式和大小并预览的简单实例
Oct 11 Javascript
微信小程序开发之实现自定义Toast弹框
Jun 08 Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 Javascript
js使用highlight.js高亮你的代码
Aug 18 Javascript
VUE element-ui 写个复用Table组件的示例代码
Nov 18 Javascript
web前端页面生成exe可执行文件的方法
Feb 08 Javascript
webpack打包多页面的方法
Nov 30 Javascript
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
vue实现登录功能
Dec 31 Vue.js
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中SESSION使用中的一点经验总结
2012/03/30 PHP
PHP is_subclass_of函数的一个BUG和解决方法
2014/06/01 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
利用js跨页面保存变量做菜单的方法
2008/01/17 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
2012/12/28 Javascript
jquery $.each()使用探讨
2013/09/23 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
JQuery实现图片轮播效果
2015/09/15 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
浅谈javascript的闭包
2017/01/23 Javascript
js实现动态显示时间效果
2017/03/06 Javascript
Angular2使用jQuery的方法教程
2017/05/28 jQuery
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
Python装饰器使用示例及实际应用例子
2015/03/06 Python
python图像处理之反色实现方法
2015/05/30 Python
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
Tensorflow实现卷积神经网络用于人脸关键点识别
2018/03/05 Python
详解Python循环作用域与闭包
2019/03/21 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
python对Excel的读取的示例代码
2020/02/14 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
SheIn俄罗斯:时尚女装网上商店
2017/02/28 全球购物
HEMA法国:荷兰原创设计
2019/02/21 全球购物
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
2014年秋季开学演讲稿
2014/05/24 职场文书
教师先进个人材料
2014/12/17 职场文书
廉洁自律承诺书2015
2015/01/22 职场文书
vue中data里面的数据相互使用方式
2022/06/05 Vue.js