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 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...
随机推荐
- CPP Note
hello.cpp -> 编译代码g++ hello.cpp -o a -> a.out 区分大小写的编程语言 内置类型 一些基本类型可以使用一个或多个类型修饰符进行修饰: signed: ...
- 清理configure脚本生成的文件
今天在修改dovecot的代码时遇到一个问题,需要重新执行configure脚本,想先把之前configure生成的文件删除掉. 结果看了configure --help没有找到可以用的命令,最后搜了 ...
- 【GMT43智能液晶模块】例程四：SYSTICK定时器——定时读取触摸值
实验原理: 本实验采用系统定时器,通过简单的初始化定时20ms,每20ms读取一次触 摸值,并基于emWin的UI界面将读到的触摸值显示在界面上. 实验现象: 源代码下载链接: 链接:http://p ...
- hdoj：2032
#include <iostream> #include <string> using namespace std; int main() { int n; ][]; ; i ...
- Vue.js常用指令：v-for
一.什么是v-for指令 在Vue.js中,我们可以使用v-for指令基于源数据重复渲染元素.也就是说可以使用v-for指令实现遍历功能,包括遍历数组.对象.数组对象等. 二.遍历数组 代码示例如下: ...
- Intelij U
1.https://link.jianshu.com/?t=http://idea.lanyus.com/,下载JetbrainsCrack-2.6.2.jar,放到bin目录 2.编辑bin目录下面 ...
- Asp.net Daily Build by MsBuild
:: 目录结构:: +GW.Point.BLL --dir dll:: +GW.Point.IBLL --dir dll:: +GW.Point.DAL --dir dll:: +GW.Point.I ...
- Java知多少（9） import及Java类的搜索路径
如果你希望使用Java包中的类,就必须先使用import语句导入. import语句与C语言中的 #include 有些类似,语法为: import package1[.package2…].c ...
- /proc详解
内容摘要:Linux系统上的/proc目录是一种文件系统,即proc文件系统. Linux系统上的/proc目录是一种文件系统,即proc文件系统.与其它常见的文件系统不同的是,/proc是一种伪文件 ...
- 教程：Spagobi开源BI系统 Console报表设计教程
Console Designer 1 Console Designer Console Designer 1.1 Introduction 1.2 Dataset Tab 1.3 Summary Pa ...