使用toggle()方法进行显示隐藏
这是一个示例：
<html>
<head>
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.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>
效果体验：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 的元素）。
使用toggle()方法进行显示隐藏的更多相关文章
- jQuery使用toggle()方法进行显示隐藏
转自:https://www.cnblogs.com/sosoft/p/3460556.html 这是一个示例: 1 <html> 2 <head> 3 <script ...
- jquery的toggle动画效果显示隐藏
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jquery点击改变class并toggle；jquery点击改变图片src源码并toggle；jquery显示隐藏toggle
<html><head><meta charset="utf-8"><title></title><script ...
- 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 ...
- js进阶 13-1 jquery动画中的显示隐藏函数有哪些
js进阶 13-1 jquery动画中的显示隐藏函数有哪些 一.总结 一句话总结:show(),hide(),toggle(),这三个. 1.jquery动画中显示隐藏效果函数有哪些? show()h ...
- vue实现 toggle显示隐藏效果
背景介绍jQuery中有个toggle()方法,可以切换元素的显示状态,在用vue时如果不引入jQuery如何实现这种效果?使用场景常见有三种场景:1.控制页面中一个dom元素2.控制页面中多个dom ...
- div的显示隐藏方法汇总
JQuery DIV 动态隐藏和显示的方法 1. 如果在载入是隐藏: <head> <script language="javascript"> funct ...
- 基于jquery封装通用的控制显示隐藏的方法
应用场景 在项目中会存在大量这样的需求: 1.选择不同的radio单选框,页面上的部分内容随之显示隐藏 2.选择不同的option下拉框内容,页面上的部分内容随之显示隐藏 如果每次遇到这类需求都单独写 ...
随机推荐
- Hadoop学习笔记—2.不怕故障的海量存储：HDFS基础入门
一.HDFS出现的背景 随着社会的进步,需要处理数据量越来越多,在一个操作系统管辖的范围存不下了,那么就分配到更多的操作系统管理的磁盘中,但是却不方便管理和维护—>因此,迫切需要一种系统来管理多 ...
- Linux 配置YUM
标签:MYSQL/linux 概述 文章主要介绍配置163,mysql,epel这三个yum源. 目录 概述 步骤 下载安装包 卸载自带的yum 安装yum包 添加yum 总结 步骤 安装163源 注 ...
- Docker：镜像操作和容器操作
镜像操作 列出镜像: $ sudo docker images REPOSITORY TAG IMAGE ID CREATED VIRTUAL SIZE hello-world latest 0a6b ...
- ASP.NET MVC 5 - 验证编辑方法(Edit method)和编辑视图(Edit view)
在本节中,您将验证电影控制器生成的编辑方法(Edit action methods)和视图.但是首先将修改点代码,使得发布日期属性(ReleaseDate)看上去更好.打开Models \ Movie ...
- struts1四:常用标签
struts1支持的5种标签: HTML 标签: 用来创建能够和Struts 框架和其他相应的HTML 标签交互的HTML 输入表单 Bean 标签: 在访问JavaBeans 及其属性,以及定义一个 ...
- Atiti 数据库系统原理 与数据库方面的书籍 attilax总结 v3 .docx
Atiti 数据库系统原理 与数据库方面的书籍 attilax总结 v3 .docx 1.1. 数据库的类型,网状,层次,树形数据库,kv数据库.oodb2 1.2. Er模型2 1.3. Sql2 ...
- Qt on Android 核心编程
Qt on Android 核心编程(最好看的Qt编程书!CSDN博主foruok倾力奉献!) 安晓辉 著 ISBN 978-7-121-24457-5 2015年1月出版 定价:65.00元 4 ...
- JVM字节码指令
invokevirtual 调用实例方法 invokespecial 调用父类构造,实例初始化方法,私有方法 dup 复制栈顶数值,并且复制值进栈,pop/pop2为栈顶值出栈 aload_0 加载第 ...
- 浅析z-index（覆盖顺序）和定位
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...
- LINQ系列：LINQ to XML操作
LINQ to XML操作XML文件的方法,如创建XML文件.添加新的元素到XML文件中.修改XML文件中的元素.删除XML文件中的元素等. 1. 创建XML文件 string xmlFilePath ...