使用jQuery的toggle()方法对HTML标签进行显示、隐藏操作
这是一个示例：
<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)
|
参数 |
描述 |
|
speed |
可选。规定元素从可见到隐藏的速度（或者相反）。默认为 "0"。 可能的值：
在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。 如果设置此参数，则无法使用 switch 参数。 |
|
callback |
可选。toggle 函数执行完之后，要执行的函数。 如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。 除非设置了 speed 参数，否则不能设置该参数。 |
|
switch |
可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。
如果设置此参数，则无法使用 speed 和 callback 参数。 |
PS：该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）。
使用jQuery的toggle()方法对HTML标签进行显示、隐藏操作的更多相关文章
- 用jQuery的toggle方法实现元素的左右滑动隐藏
通常情况下给元素加toggle方法通常会是上下滑动隐藏,而有时我们又需要左右滑动隐藏怎么办呢 $(document).ready(function(){ $('#example').click(fun ...
- jQuery 效果 - toggle() 方法切换元素的可见状态。
定义和用法 toggle() 方法切换元素的可见状态. 如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素. 语法 $(selector).toggle(speed,callback, ...
- jQuery使用toggle()方法进行显示隐藏
转自:https://www.cnblogs.com/sosoft/p/3460556.html 这是一个示例: 1 <html> 2 <head> 3 <script ...
- JQuery 的toggle() 方法如何使用？
JQuery中的toggle()方法,相当于点一个元素时,重复循环两个函数,而这两个函数可以作为toggle()函数的两个参数传进去,当第一次点击的时候会执行前面的参数,而第二次点击时执行的是后面的参 ...
- jquery 复合事件 toggle()方法的使用
定义和用法 toggle() 方法用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件. 语法: $(selector).toggle(function1(),function2 ...
- jQuery事件 - toggle() 方法
1.切换元素的显示与隐藏状态 实例 切换 <p> 元素的显示与隐藏状态: $(".btn1").click(function(){ $("p").h ...
- 很实用的jQuery事件 - toggle() 方法
实例 切换不同的背景色: $("p").toggle( function(){ $("body").css("background-color&quo ...
- Jquery的toggle()方法
toggle()并不是仅仅能 显示/隐藏而已 它的格式如下 toggle(fn1,fn2,fn3.....) 也就是说,它的参数可以说不定数目的 若干个方法,然后每个方法按顺序轮番调用 $(docum ...
- JQuery设置和去除disabled属性 与 display显示隐藏
//两种方法设置disabled属性 $('#areaSelect').attr("disabled",true); $('#areaSelect').attr("dis ...
随机推荐
- A - 不容易系列之(3)―― LELE的RPG难题 简单递推
人称“AC女之杀手”的超级偶像LELE最近忽然玩起了深沉,这可急坏了众多“Cole”(LELE的粉丝,即"可乐"),经过多方打探,某资深Cole终于知道了原因,原来,LELE最近研 ...
- PostGIS学习相关术语
POI 兴趣点(英语:point of interest,通常缩写成POI)乃是电子地图上的某个地标.景点,用以标示出该地所代表的政府部门.各行各业之商业机构(加油站.百货公司.超市.餐厅.酒店.便利 ...
- 察看linux 发行版
好像没有太通用的方法. 看一下/etc/redhat-release. redhat 系列(包括centos) 会有如下内容 [root@localhost ~]# cat /etc/redhat- ...
- heap实现
//STL提供的是Max heap,使用vector作为底部容器 //push_heap算法:首先将元素放到堆所对应的数组的末端,然后从该节点开始向上调整, //若当前结点键值比父结点大,则兑换位置, ...
- 为什么 Android Studio 工程文件夹占用空间这么大？
为什么 Android Studio 工程文件夹占用空间这么大? 学习了: https://www.cnblogs.com/chengyujia/p/5791002.html
- 【打CF，学算法——二星级】CF 520B Two Buttons
[CF简单介绍] 提交链接:Two Buttons 题面: B. Two Buttons time limit per test 2 seconds memory limit per test 256 ...
- MySQL5.6 GTID方式，配置主从
迁移数据到从库 数据导出: mysqldump -uroot -p111111 -h127. -P3306 -q --single-transaction -R -E --triggers --def ...
- [bzoj5404]party
https://zybuluo.com/ysner/note/1240918 题面 这题面不好概括啊 解析 \(5pts\)算法 既然\(q=0\),打上文件输入输出即可. 当然不开够空间且不特判的小 ...
- 洛谷 p1625
高精度 我以为这题必有高论,怎么想也想不出来,没想到竟是如此粗鄙做法. 我们写一个高精度模拟一下,然后枚举约数看是否能约分,由于我不会高精度除法,就抄了一发 其实这种两项之比和项数有关的数列是不能推通 ...
- ngRoute (angular-route.js) 和 ui-router (angular-ui-router.js) 模块有什么不同呢？
ngRoute (angular-route.js) 和 ui-router (angular-ui-router.js) 模块有什么不同呢? 很多文章中都有说道:当时ngRoute在路由配置时用$r ...