看《jQeury 权威指南》时看到这个toggle()方法。因为之前在慕课网学习接触过。发现两者讲的有细微的不同

以隐藏/显示目标元素效果为例，慕课网是这样讲解的

$("#clickId").toggle( 

function(){$('#divId').hide();}, //方法之间以逗号隔开

function(){$('#divId').show();} 

);

点击ID名为clickId的按钮，第一次会执行第一个function来隐藏ID名为divId的块。第二次点击会显示。第三次点击再次执行隐藏，以此类推。

同样一个功能，而《jQeury 权威指南》中是这样讲解用法的。

$("#clickId").click(function() {

   $("divId").toggle();

})

使用toggle()的无参数方法来

同样的隐藏/显示目标元素的效果，《jQuery 权威指南》的处理方式显得更加简洁。使用无参方法时，只有2种状态。但是当需要切换2种以上的状态时，就只能使用慕课网的方法了。下面讲解toggle()方法可以实现多函数绑定

<body>

        <input id="btntest" type="button" value="点一下我" />

        <div>你好，请选择佳丽</div>

        <script type="text/javascript">

            $(function(){

                $("#btntest").toggle(

                    function(){

                        $("div").html("1号范冰冰");

                    },function(){

                        $("div").html("2号李冰冰");

                    },function() {

                        $("div").html("3号杨幂");

                    },function() {

                        $("div").html("4号姚晨");

                    }

                    )

                })

　　　　 </script>

    </body>

以下是运行结果。可见toggle（）方法可以绑定多个函数，使用相当灵活。

toggle有3种调参的方法。上面讲了第一种无参使用方法，下面是第二种

toggle(switch)

switch是布尔类型的  数值是true或者false （若使用布尔值。则无法使用第三种speed参数方法）

var intI = 0;
var blnA = intI > 1; //获取逻辑值false;
$("img").toggle(blnA);

此时的blnA值是false。所以他能将"img"图片隐藏。

第三种是

$(selector).toggle(speed,callback)

speed是触发事件后执行的事件，可能的值：

  • 毫秒 （比如 1000 也就是1秒）
  • "slow"（0.6秒）
  • "normal"（0.4秒）
  • "fast"（0.2秒）

　　在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。也就是动画效果了

　　callback是整个toggle()方法执行完之后触发的事件，和上面的多函数绑定是不同的，一定要设置speed参数才能使用callback参数。

在1.8.2及之前的版本可以使用toggle,但在1.9版本之后就将其删除了（挺好用的，不知道为什么删除了=.=！）

那么就要用手动方式来代替他了，或者使用过渡版本的jQuery，下面是手动方式。

//使用toggle方法时
$('button').click(function(){$("img").toggle();})

//手动实现toggle()方法

$('button').click(function(){

    if($("img").is(":hidden")){

        $("img").show();

    }else{

        $("img").hide();

    }

})

部分数据参考w3school

http://www.w3school.com.cn/jquery/effect_toggle.asp

jQuery toggle() 方法与实例以及代替方法。的更多相关文章

  1. 静态工厂方法和实例工厂方法及普通的bean

    容纳你的bean  bean工厂:最简单的容器,提供了基础的依赖注入支持.创建各种类型的Bean.  应用上下文(ApplicationContext):建立在bean工厂基础之上,提供系统架构服务. ...

  2. java 反射机制之 getDeclaredMethod（）获取方法，然后invoke执行实例对应的方法

    关于反射中getDeclaredMethod().invoke()的学习,来源于项目中的一行代码: SubjectService.class.getDeclaredMethod(autoMatchCo ...

  3. JQuery 获取json数据$.getJSON方法的实例代码

    这篇文章介绍了JQuery 获取json数据$.getJSON方法的实例代码,有需要的朋友可以参考一下 前台: function SelectProject() { var a = new Array ...

  4. jQuery实例属性和方法

    jQuery.fn = jQuery.prototype = {  //添加实例属性和方法   jquery : 版本   constructor : 修正指向问题   init() : 初始化和参数 ...

  5. jQuery中on()方法用法实例详解

    这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能及各种常见的使用技巧,并对比分析了与bind(),live(),delegate()等方法的区别,需要的朋友可以参考下 本 ...

  6. jquery toggle 方法被废除的替代方法

    今天使用 toggle 方法的时候,该方法一直不能生效. 原来jquery 的引入文件是1.9,该方法在1.8以上已被废除. 那么简单的切换状态,我们可使用if 语句进行代替 如下: 记录一开始设置隐 ...

  7. jquery动态加载js三种方法实例

    这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getScript(\"test.js\" ...

  8. jQuery中on()方法用法实例

    这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能.定义及在匹配元素上绑定一个或者多个事件处理函数的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中on()方法 ...

  9. jquery toggle()方法 语法

    jquery toggle()方法 语法 作用:toggle() 方法用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件.该方法也可用于切换被选元素的 hide() 与 sho ...

随机推荐

  1. BZOJ 1050 [HAOI2006]旅行comf

    1050: [HAOI2006]旅行comf Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1889  Solved: 976[Submit][Sta ...

  2. C语言基础课程 第一课 Linux环境配置小实战httpserver

     网段我需要改成如下 10.重启网络服务 并且查看ip 11. 打开windows的浏览器数人Linux的IP地址出现REDHAT的欢迎界面 11.进入目录 12.编写一个简单的html脚本 13 ...

  3. 模板：强连通分量&2-sat

    void Tarjan(int x){ low[x]=ID[x]=++tot; st[++top]=x;Inst[x]=true; for(int i=fir[x];i;i=nxt[i]) if(!I ...

  4. 网络流(最大流) CQOI 2015 BZOJ 3931 网络吞吐量

    3931: [CQOI2015]网络吞吐量 Description 路由是指通过计算机网络把信息从源地址传输到目的地址的活 动,也是计算机网络设计中的重点和难点.网络中实现路由转发的硬件设备称为路由器 ...

  5. 【模拟】CSU 1807 最长上升子序列~ (2016湖南省第十二届大学生计算机程序设计竞赛)

    题目链接: http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1807 题目大意: 给你一个长度为N(N<=105)的数列,数列中的0可以被其他数 ...

  6. oracle 表的管理(数据类型，表创建删除，数据CRUD 操作)

    表名和列的命名规则

  7. SQL 2005远程连接是出错（provider: SQL 网络接口, error: 28 - 服务器不支持请求的协议

    SQL 2005远程连接是出错(provider: SQL 网络接口, error: 28 - 服务器不支持请求的协议 sql远程连接服务器网络sql serversqlserver 解决方法:在服务 ...

  8. 译文链接：http://www.codeceo.com/article/10-truth-programmer-must-know.html

    大多数时候,写代码都是挺有意义的一件事,不光能增加经验值,解决难题的时候还特别爽.耐心.毅力.执着,再加上正确的工具——只要有它们的亲密协作,优雅.漂亮的代码就是手到擒来的事儿. 但是,紧接着拙劣的资 ...

  9. Nodejs in Visual Studio Code 09.企业网与CNPM

    1.开始 CNPM : https://npm.taobao.org/ 2.企业网HTTP代理上网 平时办公在一个大企业网(10.*.*.*)中,使用HTTP代理上网,发现npm命令无法执行. 解决方 ...

  10. SRM 395(1-250pt)

    DIV1 250pt 题意:在平面直角坐标系中,只能走到整点,每次有两种移动方法,可以沿平行于坐标轴方向走,也可以沿45度方向走,前者走一步耗时wt,后者走一步耗时st.比如从(x, y)可以走到(x ...