使用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下拉框内容,页面上的部分内容随之显示隐藏 如果每次遇到这类需求都单独写 ...
随机推荐
- Curator Framework的基本使用方法
Curator Framework提供了简化使用zookeeper更高级的API接口.它包涵很多优秀的特性,主要包括以下三点: 自动连接管理:自动处理zookeeper的连接和重试存在一些潜在的问题: ...
- 剑指Offer面试题：2.二维数组中的查找
一.题目:二维数组中的查找 题目:在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. ...
- Hadoop学习笔记—7.计数器与自定义计数器
一.Hadoop中的计数器 计数器:计数器是用来记录job的执行进度和状态的.它的作用可以理解为日志.我们通常可以在程序的某个位置插入计数器,用来记录数据或者进度的变化情况,它比日志更便利进行分析. ...
- Mac下设置Android源代码编译环境
在Mac下编译Android最麻烦的就是设置Android的编译环境了,做完这一步基本上剩下的就是近乎傻瓜式的操作了.说起来也简单就三步,设置大小写敏感的文件系统.安装编译工具.设置文件系统同时能打开 ...
- [转]GC简介
[转]GC简介 原文链接:http://www.cnblogs.com/cposture/p/4845189.html 原文写得太好了,这里转一下. 1 GC机制 1.1 对象 从计算机的角度,装有数 ...
- Zookeeper API for JAVA实战与应用
package com.zookeeper.watcher; import java.util.List; import java.util.concurrent.CountDownLatch; im ...
- kettle资源库配置
资源库的作用:资源库是用来保存操作步骤和相关的日志,转换,JOB 等信息.用户通过图形界面创建的的转换任务可以保存在资源库中.资源库可以是各种常见的数据库,用户通过用户名/ 密码来访问资源库中的资源, ...
- iOS-UI-UI控件概述
以下列举一些在开发中可能用得上的UI控件: IBAction和IBOutlet,UIView 1 @interface ViewController : UIViewController 2 3 @p ...
- WPF入门教程系列十八——WPF中的数据绑定(四)
六.排序 如果想以特定的方式对数据进行排序,可以绑定到 CollectionViewSource,而不是直接绑定到 ObjectDataProvider.CollectionViewSource 则会 ...
- 蓝桥杯 十六进制转八进制（超大测试数据,java实现）
问题描述 给定n个十六进制正整数,输出它们对应的八进制数.输入格式 输入的第一行为一个正整数n (1<=n<=10). 接下来n行,每行一个由0~9.大写字母A~F组成的字符串,表示要转换 ...