jQuery使用toggle()方法进行显示隐藏
转自：https://www.cnblogs.com/sosoft/p/3460556.html
这是一个示例：
1 <html>
2 <head>
3 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
4 <script type="text/javascript">
5 $(document).ready(function(){
6 $(".btn1").click(function(){
7 $("p").toggle(); //toggle()方法进行显示隐藏交互事件，如果显示的就进行隐藏，如果是隐藏的就显示
8 });
9 $(".btn2").toggle(2000,function(){
10 $(".div2").toggle(); //callback
11 });
12 });
13 </script>
14 </head>
15 <body>
16 <p>This is a paragraph.</p>
17 <button class="btn1">Toggle</button>
18 <button class="btn2">Toggle2</button>
19 <div class="div1">http://www.cnblogs.com/sosoft/</div>
20 <div class="div2" style="display:none">柔城</div>
21 </body>
22 </html>
效果体验：http://hovertree.com/texiao/jquery/8.htm
示例中用到的toggle()方法：
定义和用法
toggle() 方法切换元素的可见状态。
如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。
语法
$(selector).toggle(speed,callback,switch)
| 参数 | 描述 |
|---|---|
| speed |
可选。规定元素从可见到隐藏的速度（或者相反）。默认为 "0"。 可能的值：
在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。 如果设置此参数，则无法使用 switch 参数。 |
| callback |
可选。toggle 函数执行完之后，要执行的函数。 如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。 除非设置了 speed 参数，否则不能设置该参数。 |
| switch |
可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。
如果设置此参数，则无法使用 speed 和 callback 参数。 |
提示和注释
注释：该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）。
jQuery使用toggle()方法进行显示隐藏的更多相关文章
- 使用toggle()方法进行显示隐藏
这是一个示例: <html> <head> <script type="text/javascript" src="http://keley ...
- jquery的toggle动画效果显示隐藏
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jquery的toggle()函数，显示/隐藏交替
<!DOCTYPE html> <html lang="en"> <head> <script src="jquery.js&q ...
- 使用jQuery的toggle()方法对HTML标签进行显示、隐藏操作
这是一个示例: <html> <head> <script type="text/javascript" src="https://code ...
- 基于jquery封装通用的控制显示隐藏的方法
应用场景 在项目中会存在大量这样的需求: 1.选择不同的radio单选框,页面上的部分内容随之显示隐藏 2.选择不同的option下拉框内容,页面上的部分内容随之显示隐藏 如果每次遇到这类需求都单独写 ...
- 用jQuery的toggle方法实现元素的左右滑动隐藏
通常情况下给元素加toggle方法通常会是上下滑动隐藏,而有时我们又需要左右滑动隐藏怎么办呢 $(document).ready(function(){ $('#example').click(fun ...
- Jquery not选择器实现元素显示隐藏
初初认识jQuery的not选择器,想要实现的功能是,点击第一个div,显示第二个div,点击第一个div以外的地方,隐藏第二个div. 具体代码如下: <!DOCTYPE html> & ...
- jQuery 效果 - toggle() 方法切换元素的可见状态。
定义和用法 toggle() 方法切换元素的可见状态. 如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素. 语法 $(selector).toggle(speed,callback, ...
- JQuery 的toggle() 方法如何使用？
JQuery中的toggle()方法,相当于点一个元素时,重复循环两个函数,而这两个函数可以作为toggle()函数的两个参数传进去,当第一次点击的时候会执行前面的参数,而第二次点击时执行的是后面的参 ...
随机推荐
- Ubuntu窗口大小调节方法
Description: 在Vmware Workstation 11上安装了Ubuntu 10.0,画面显示如下所示: Ubuntu系统的屏幕太小.调整方法:调节显示器分辨率即可,下图是将分辨率调节 ...
- Sqlite/ FMDB
Sqlite 1. Sqlite数据库 > 数据库? 按数据结构来组织,存储和管理数据的仓库. > 关系型数据库:使用二维表及其之间的联系组织成一个数据组织. 关系:可以理解为一张二维表, ...
- 将从mysql数据库查询的信息，遍历到List<>以及一些随机数的生成
将从mysql数据库查询的信息,遍历到List<>以及一些随机数的生成. 代码比较乱,但是方法还是对的,大家又需要的选择看,希望对博友 有帮助,欢迎留言分享! public class s ...
- delete和truncate区别
相同之处:truncate在功能上与不带WHERE子句的delete 语句相同:二者均删除表中的全部行.小心使用truncate,删除后就没有了 1.delete : 删除"表格记录&quo ...
- Java并发编程之CountDownLatch
一.场景描述 在多线程程序设计中,经常会遇到一个线程等待一个或多个线程的场景 例如:百米赛跑,十名运动员同时起跑,由于速度的快慢,肯定有先到达和后到达的,而终点有个统计成绩的仪器,当所有选手到达终点时 ...
- mac和linux下使用Docker，部署SpringBoot项目到docker
主要是看一下如何在linux及mac上安装docker,创建docker镜像,部署SpringBoot项目到docker,并借助于DaoCloud进行docker镜像下载加速等. 我用的电脑是mac, ...
- 【MFC】SetWindowPos函数使用详解
摘自: http://wenku.baidu.com/link?url=hYKs20rYA13TTdMl9gJ378GNOsxH1DPZPkYZVEIcipATlVBMLzjWdpd2-29fm-tq ...
- bulkcopy实现批量插入与更新
public static void UpdateData<T>(List<T> list, string TabelName) { DataTable dt = new Da ...
- ACM学习历程—HihoCoder1309任务分配(排序 && 贪心)
http://hihocoder.com/problemset/problem/1309 题目大意是给定n个任务的起始时间,求问最少需要多少台机器. 有一个贪心的策略就是,如果说对于一个任务结束,必然 ...
- 谨慎安装Python3.7.0，SSL低版本导致Pip无法使用
最新新配置了一台服务器.安装 的时候直接使用了最新的Python 3.7最新版本. 安装成功,编译成功.但是用pip 安装包的时候提示:pip is configured with locations ...