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 相关文章推荐
JavaScript 拖拉缩放效果
Dec 10 Javascript
Javascript 学习书 推荐
Jun 13 Javascript
JavaScript全排列的六种算法 具体实现
Jun 29 Javascript
C++中的string类的用法小结
Aug 07 Javascript
JavaScript学习笔记之数组的增、删、改、查
Mar 23 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
JS实现数组按升序及降序排列的方法
Apr 26 Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
微信小程序-可移动菜单的实现过程详解
Jun 24 Javascript
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+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
PHP文件操作详解
2016/12/30 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
PHP创建对象的六种方式实例总结
2019/06/27 PHP
jquery隐藏标签和显示标签的实例
2013/11/11 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
2016/01/23 Javascript
强大Vue.js组件浅析
2016/09/12 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
微信小程序如何像vue一样在动态绑定类名
2018/04/17 Javascript
Vue实现点击按钮复制文本内容的例子
2019/11/09 Javascript
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
python使用Berkeley DB数据库实例
2014/09/26 Python
python算法表示概念扫盲教程
2017/04/13 Python
Python使用正则表达式实现文本替换的方法
2017/04/18 Python
python3.5绘制随机漫步图
2018/08/27 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
EJB实例的生命周期
2016/10/28 面试题
超市营业员岗位职责
2013/12/20 职场文书
个人职业生涯规划书1500字
2013/12/31 职场文书
船舶专业个人求职信范文
2014/01/02 职场文书
写给女朋友的道歉信
2014/01/12 职场文书
公司委托书范本
2014/04/04 职场文书
大学三年计划书范文
2014/04/30 职场文书
求职信的正确写法
2014/07/10 职场文书
党员三严三实对照检查材料
2014/10/13 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
幼儿园教师管理制度
2015/08/05 职场文书
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电