toggle显示与隐藏切换
jQuery中显示与隐藏切换toggle方法
show与hide是一对互斥的方法。需要对元素进行显示隐藏的互斥切换，通常情况是需要先判断元素的display状态，然后调用其对应的处理方法。比如显示的元素，那么就要调用hide，反之亦然。 对于这样的操作行为，jQuery提供了一个便捷方法toggle用于切换显示或隐藏匹配元素
基本的操作：toggle();
这是最基本的操作，处理元素显示或者隐藏，因为不带参数，所以没有动画。通过改变CSS的display属性，匹配的元素将被立即显示或隐藏，没有动画。
- 如果元素是最初显示，它会被隐藏
- 如果隐藏的，它会显示出来
display属性将被储存并且需要的时候可以恢复。如果一个元素的display值为inline，然后是隐藏和显示，这个元素将再次显示inline
提供参数：.toggle( [duration ] [, complete ] )
同样的提供了时间、还有动画结束的回调。在参数对应的时间内，元素会发生显示/隐藏的改变，在改变的过程中会把元素的高、宽、不透明度进行一系列动画效果。这个元素其实就是show与hide的方法
直接定位：.toggle(display)
直接提供一个参数，指定要改变的元素的最终效果
其实就是确定是使用show还是hide方法
if ( display === true ) {
$( "elem" ).show();
} else if ( display === false ) {
$( "elem" ).hide();
}
toggle方法就是show与hide的相互切换的一个快捷方法，具体使用可以参考右边的案例：
<!DOCTYPE html>
<html> <head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
div {
width: 500px;
height: 50px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
} .left {
background: #bbffaa;
} .right {
background: yellow;
display: none;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head> <body>
<h2>通过toggle切换显示与隐藏</h2>
<div class="left">显示到隐藏</div>
<div class="left">显示到隐藏</div> <div class="right">隐藏到显示</div>
<button>直接show-hide动画</button>
<button>直接hide-show动画</button>
<script type="text/javascript">
$("button:first").click(function() {
$(".left").toggle(3000)
});
</script> <script type="text/javascript">
$("button:last").click(function() {
$(".right").toggle(3000)
});
</script> </body> </html>
toggle显示与隐藏切换的更多相关文章
- IOS swift实现密码的显示与隐藏切换
最近做项目遇到一个需要做密码的显示与隐藏功能,简单从功能上讲是比较简单的,但是,ios有个恶心的BUG,就是在切换显示密码后再隐藏密码时输入就被清空了,这个非常不友好,为了解决这个问题,我在网上找了相 ...
- ios 导航栏的显示和隐藏切换
从简单的一个没有导航栏的界面A push到另一个有导航栏的界面 B,在界面A的逻辑中加入下面逻辑: 屏幕快照 2016-03-30 上午10.35.24.png 这样完美的处理了这个场景变换需求.引起 ...
- vue实现 toggle显示隐藏效果
背景介绍jQuery中有个toggle()方法,可以切换元素的显示状态,在用vue时如果不引入jQuery如何实现这种效果?使用场景常见有三种场景:1.控制页面中一个dom元素2.控制页面中多个dom ...
- React切换显示和隐藏
1 {radioChange >= 0 && 2 <div> 3 {radioChange === 0 ? ( 4 <div className={style. ...
- jquery里面控制显示和隐藏 ___土狗toggle
$("#hide").click(function(){ $("p").hide(); }); $("#show").click(funct ...
- jQuery显示和隐藏 常用的状态判断方法
显示:show() display:block; 隐藏:hide() display:none; 当显示和隐藏切换的时候,需要判断此刻是显示还是隐藏,那判断条件常用以下几种方法: 1.if(th ...
- jQuery控制元素显示、隐藏、切换、滑动的方法
jQuery 隐藏和显示 通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示: 实例 $("#hide").click(functio ...
- jQuery中toggle与slideToggle以及fadeToggle的显示、隐藏方法的比较
1.区别 ①动画效果的比较: toggle:直接显示.隐藏,如果有[时间参数]且[匹配的元素有宽度属性],则动态效果为左上角-右下角拉卷效果,透明度0-1之间的变化:若有时间参数但是[匹配的元素没有宽 ...
- 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态
查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...
随机推荐
- swift4.0 对 afn 进行二次封装
先将 afn 用pod导入到 工程中 创建一个类 ZHttpTools 继承自 AFHTTPSessionManager 一般我们不希望网络请求同时有多个存在,所以我们将这个工具类 设计成单例 代 ...
- primary库新增数据文件后，standby库无法创建文件并终止数据同步
主库是RAC环境,使用asm存放数据文件,备库是操作系统本地文件系统存放数据文件.在主库执行以下操作: SQL> alter tablespace ysdv add datafile '+dat ...
- Linux使用图形LVM(Logical Volume Manager)工具进行分区的动态扩展
- Kubernetes的ConfigMap解析
ConfigMap功能在Kubernetes1.2版本的时候就有了,许多应用程序会从配置文件.命令行参数或环境变量中读取配置信息.这些配置信息需要与docker image解耦,你总不能每修改一个配置 ...
- 第三部分：Android 应用程序接口指南---第二节：UI---第十一章 样式和主题
第11章 样式和主题 style是用于指定View或window的外观和格式的一系列属性的集合.style可以指定高(height).填补(padding).字体颜色.字体大小.背景颜色等等属性.st ...
- 物联网架构成长之路(6)-EMQ权限控制
1. 前言 EMQTT属于一个比较小众的开源软件,很多资料不全,很麻烦,很多功能都是靠猜测,还有就是看官方提供的那几个插件,了解. 2. 说明 上一小节的插件 emq_plugin_wunaozai ...
- Linux下ip地址查询
[时间:2016-12] [状态:Open] [关键词:linux,ip地址,ifconfig,ip addr] 0 引用 说起来比较搞笑,我在windows下知道可以使用ipconfig命令查询本机 ...
- OGG-01028 Incompatible Record解决办法
How to recover from an OGG-01028 Incompatible Record if the trail is not corrupt (Doc ID 1507462.1) ...
- MySQL的binlog日志<转>
binlog 基本认识 MySQL的二进制日志可以说是MySQL最重要的日志了,它记录了所有的DDL和DML(除了数据查询语句)语句,以事件形式记录,还包含语句所执行的消耗的时间,MySQL的二进制日 ...
- UML类建模（强烈推荐-思路很清晰）
UML类建模(强烈推荐-思路很清晰) 2016年10月23日 15:17:47 mbshqqb 阅读数:2315 标签: uml面向对象设计模式 更多 个人分类: 面向对象程序设计 UML的构造快 ...