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中的数字与字符串相加实例分析
Aug 14 Javascript
如何使用json在前后台进行数据传输实例介绍
Apr 11 Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
javascript实现颜色渐变的方法
Oct 30 Javascript
jquery的each方法使用示例分享
Mar 25 Javascript
javascritp添加url参数将参数加入到url中
Sep 25 Javascript
模板视图和AngularJS之间冲突的解决方法
Nov 22 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
Feb 16 Javascript
深入浅析Vue不同场景下组件间的数据交流
Aug 15 Javascript
Angularjs实现上传图片预览功能
Sep 01 Javascript
用js简单提供增删改查接口
May 12 Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 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
ThinkPHP 表单自动验证运用示例
2014/10/13 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
P3P Header解决Cookie跨域的问题
2013/03/12 Javascript
jquery 3D 标签云示例代码
2014/06/12 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
javascript 常用验证函数总结
2016/06/28 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
2017/02/06 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
JS简单实现数组去重的方法分析
2017/10/14 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
JavaScript 绘制饼图的示例
2021/02/19 Javascript
[49:13]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第一局
2016/02/27 DOTA
[05:59]2018DOTA2国际邀请赛寻真——只为胜利的Secret
2018/08/13 DOTA
python通过pil模块获得图片exif信息的方法
2015/03/16 Python
Python中用Decorator来简化元编程的教程
2015/04/13 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
python爬取基于m3u8协议的ts文件并合并
2019/04/26 Python
使用python实现飞机大战游戏
2020/03/23 Python
python3中sys.argv的实例用法
2020/04/24 Python
关于matplotlib-legend 位置属性 loc 使用说明
2020/05/16 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
大三在校生电子商务求职信
2013/10/29 职场文书
年会搞笑主持词串词
2014/03/24 职场文书
岗位说明书范文
2014/05/07 职场文书
上课说话检讨书
2015/01/27 职场文书
节约用电倡议书
2015/04/28 职场文书
员工升职自我评价
2019/03/26 职场文书
聊聊mysql都有哪几种分区方式
2022/04/13 MySQL
Python如何快速找到多个字典中的公共键(key)
2022/04/29 Python