使用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 ...
随机推荐
- 非常适合新手的jq/zepto源码分析02
function isPlainObject(obj) { return isObject(obj) && !isWindow(obj) && Object.getPr ...
- 1.4 - OSPF的运行模式⑦
帧中继的子接口选用原则: 1.在一个封装FR的物理接口上,可以同时承载多条PVC. 为了网络的可扩展性,建议不论在考试环境还是在工程环境中,都应该优先考虑使用子接口 2.应该创建几个子接口:在一个物理 ...
- ubuntu刪除升級后多余的内核
列出所安装的内核 带有image的就是内核文件dpkg --get-selections|grep linuxlibselinux1 installlinux-386 installlinux-ima ...
- ORA-00600: internal error code, arguments: [kkqtSetOp.1]
新数据库从32升级到64位的11G 11 2 0 3 有条SQL 语句运行的时候会导致内部错误. 使用PL/SQL DEVELOPER 查询该语句的运行机会 按F5键 就激发了这个ORA600 单击此 ...
- 鸟哥的Linux私房菜-----10、学习Bash
- oop_day06_抽象类、接口_20150814
oop_day06_抽象类.接口_20150814 1.static final常量: 1)必须声明同一时候初始化.不能改动,类名点来訪问 2)常量名建议全部字母都大写 3)编译器编译时会直接替换为详 ...
- java无状态登录实现方式之ThreadLocal+Cookie
注:本文提到的无状态指的是无需session完毕认证.取用户封装信息. 无状态的优点: 1.多应用单点登录:在多应用的时候仅仅需在登录server登录后.各子应用无需再次登录. 2.多server集群 ...
- Codeforces Round #272 (Div. 2) D.Dreamoon and Sets 找规律
D. Dreamoon and Sets Dreamoon likes to play with sets, integers and . is defined as the largest p ...
- shell 字符串拼接 获取自身文件名 日志记录
shell 字符串拼接 获取自身文件名 日志记录 [root@hadoop2 xiaole_chk_url]# sh a.sh123.loga.sh[root@hadoop2 xiaole_chk_ ...
- 硬盘-RAID 5组建
没发正文之前本人先声明一下----本文是转载 这篇文章简直是太精彩了,呵呵 ,实在是忍不住了,一定要贴出来,让大家分享! 原作者:唐华 责任编辑:xiexiaojin 我们生活在一个历史记录在硬盘上的 ...