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 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...
随机推荐
- java Serializable和Externalizable序列化反序列化详解(转载)
一.什么是序列化? “对象序列化”(Object Serialization)是 Java1.1就开始有的特性. 简单地说,就是可以将一个对象(标志对象的类型)及其状态转换为字节码,保存起来(可以保存 ...
- java 高级用法整理
一.retentionpolicy.class vs runtime区别 java5,增加了注解的功能:其中retentionpolicy注解的生命周期,提供了三种选择策略 source.class和 ...
- spring boot+ Intellj idea devtools 设置热部署
POM文件 <!--添加依赖--> <dependency> <groupId>org.springframework.boot</groupId> & ...
- 阿里云centos安装docker-engine实践
近日在阿里云ECS服务器(centos系统)中安装docker,参考官方指南 https://docs.docker.com/engine/installation/linux/centos/ 大概 ...
- 【转】Extjs2.2.1 DateField 变形的问题解决方案
<script> //Extjs2.2.1 DateField 变形的问题 // IE Ext.isIE9 = Ext.isIE && navigator.userAgen ...
- 【Socket】关于socket长连接的心跳包
TCP的socket本身就是长连接的,那么为什么还要心跳包呢? 在smack里有个30s发送一个空消息的线程,同样关于心跳包(keepalive) 据网络搜索到的资料解释如下 内网机器如果不主动向外发 ...
- 基于jQuery虾米音乐播放器样式代码
分享一款基于jQuery虾米音乐播放器样式代码.这是一款基于jquery+html5实现的虾米音乐播放器源码下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div c ...
- Android VLC播放器二次开发3——音乐播放(歌曲列表+歌词同步滚动)
今天讲一下对VLC播放器音频播放功能进行二次开发,讲解如何改造音乐播放相关功能.最近一直在忙着优化视频解码部分代码,因为我的视频播放器需要在一台主频比较低的机器上跑(800M主频),所以视频解码能力受 ...
- An SPI class of type org.apache.lucene.codecs.PostingsFormat with name 'Lucene50' does not exist. You need to add the corresponding JAR file supporting this SPI to your classpath. The current classp
背景介绍: 当ES中guava库与hive等组件的库冲突时,对Elasticsearch库进行shade,relocate解决库冲突问题. 当使用"org.apache.maven.plug ...
- 【转帖】2015年2月份最佳的免费 UI 工具包
2015年2月份最佳的免费 UI 工具包 设计师们最喜欢 UI 工具包,这是一种思路拓展的方法,同时可以利用它们来解决各种复杂的项目,同时可用来了解其他设计师的风格.这里我们收集了最近这一个月一些最棒 ...