toggle()隐藏问题的解决方法


Posted in Javascript onFebruary 17, 2014

最近编写一个实例的时候使用到toggle函数,但是调用的时候会把元素隐藏掉,之前使用过也只是多个事件轮流切换罢了。百思不得其解于是就在网上搜索查看jQuery API文档。终于发现了原因:
原来在jQuery 1.9版本之后,toggle()发生了变化,以下是官网的Notes:
Note: This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation methodnamed .toggle() that toggles the visibility of elements. Whether the animation or the event method is fired depends on the set of argumentspassed.
在早期的版本,存在两个同名的toggle(),但是所执行的方法却是不一样的:
.toggle( handler(eventObject), handler(eventObject) [, handler(eventObject) ] )
Description: Bind two or more handlers to the matched elements, to be executed on alternate clicks.
=====================================================
.toggle( [duration ] [, complete ] )
Description: Display or hide the matched elements.
而之后的版本把第一个toggle()函数给去掉了,导致用于调用切换功能时会把元素隐藏了。
========================
既然去掉了这个函数,但是实现需求还是要的。怎么来实现多个事件的轮流切换了?
可以通过click事件判断不同的情况来触发,或者通过设置一个变量计数点击次数来执行不同的函数。

var num=0; 
$('#button').click(function(e){ 
if(num++ %2 == 0){ 
//doSomething 
}else{ 
//doOtherSomething 
} 
e.preventDefault(); //阻止元素的默认动作(如果存在) 
});
Javascript 相关文章推荐
js 获取浏览器高度和宽度值(多浏览器)
Sep 02 Javascript
JavaScript 精粹读书笔记(1,2)
Feb 07 Javascript
Web开发之JavaScript
Mar 29 Javascript
CSS图片响应式 垂直水平居中
Aug 14 Javascript
详解JavaScript时间格式化
Dec 23 Javascript
省市二级联动小案例讲解
Jul 24 Javascript
JS实现的几个常用算法
Nov 12 Javascript
Jquery鼠标放上去显示全名的实现方法
Feb 06 Javascript
JavaScript原生实现观察者模式的示例
Dec 15 Javascript
使用D3.js创建物流地图的示例代码
Jan 27 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 Javascript
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
Jquery获取和修改img的src值的方法
Feb 17 #Javascript
Jquery在指定DIV加载HTML示例代码
Feb 17 #Javascript
javascript 密码框防止用户粘贴和复制的实现代码
Feb 17 #Javascript
javascript 实现子父窗体互相传值的简单实例
Feb 17 #Javascript
javascript 回到顶部效果的实现代码
Feb 17 #Javascript
javascript 获取iframe里页面中元素值的方法
Feb 17 #Javascript
JavaScript省市联动实现代码
Feb 15 #Javascript
You might like
PHP的分页功能
2007/03/21 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
CodeIgniter读写分离实现方法详解
2016/01/20 PHP
超强多功能php绿色集成环境详解
2017/01/25 PHP
thinkphp5引入公共部分header、footer的方法详解
2018/09/14 PHP
JavaScript 学习笔记(十一)
2010/01/19 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
Angular2从搭建环境到开发步骤详解
2016/10/17 Javascript
浅谈Vuejs Prop基本用法
2017/08/17 Javascript
nodejs基础之多进程实例详解
2018/12/27 NodeJs
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
python检测某个变量是否有定义的方法
2015/05/20 Python
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
python去除扩展名的实例讲解
2018/04/23 Python
PyCharm设置护眼背景色的方法
2018/10/29 Python
PyQt5 多窗口连接实例
2019/06/19 Python
python3使用腾讯企业邮箱发送邮件的实例
2019/06/28 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
Sentry错误日志监控使用方法解析
2020/11/12 Python
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
JRE、JDK、JVM之间的关系怎样
2012/05/16 面试题
毕业生的自我评价分享
2013/12/18 职场文书
设立有限责任公司出资协议书
2014/11/01 职场文书
班主任经验交流材料
2014/12/16 职场文书
服务明星事迹材料
2014/12/29 职场文书
2015年乡镇人大工作总结
2015/04/22 职场文书
python实现简易名片管理系统
2021/04/11 Python
MySQL千万级数据表的优化实战记录
2021/08/04 MySQL
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers
关于springboot配置druid数据源不生效问题(踩坑记)
2021/09/25 Java/Android