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 相关文章推荐
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
May 13 Javascript
JavaScript事件处理器中的event参数使用介绍
May 24 Javascript
json的定义、标准格式及json字符串检验
May 11 Javascript
javascript中的this详解
Dec 08 Javascript
根据配置文件加载js依赖模块
Dec 29 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
Aug 24 Javascript
Js与Jq获取浏览器和对象值的方法
Mar 18 Javascript
AngularJS bootstrap启动详解及实例代码
Sep 14 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
浅谈Angular6的服务和依赖注入
Jun 27 Javascript
React事件处理的机制及原理
Dec 03 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
Zend Framework教程之分发器Zend_Controller_Dispatcher用法详解
2016/03/07 PHP
PHP中cookie知识点学习
2018/05/06 PHP
JavaScript 利用Cookie记录用户登录信息
2009/12/08 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
加随机数引入脚本不让浏览器读取缓存
2014/09/04 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
jQuery 获取页面li数组并删除不在数组中的key
2016/08/02 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
微信小程序 video详解及简单实例
2017/01/16 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
webpack构建的详细流程探底
2018/01/08 Javascript
Vue-router 中hash模式和history模式的区别
2018/07/24 Javascript
react基本安装与测试示例
2020/04/27 Javascript
js实现滑动滑块验证登录
2020/07/24 Javascript
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
python正则表达式re模块详细介绍
2014/05/29 Python
python实现textrank关键词提取
2018/06/22 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
python super()函数的基本使用
2020/09/10 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
linux比较文件内容的命令是什么
2013/03/04 面试题
幼师岗位求职简历的自荐信格式
2013/09/21 职场文书
不假外出检讨书
2014/01/27 职场文书
2014年公司植树节活动方案
2014/03/04 职场文书
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
《比的意义》教学反思
2016/02/18 职场文书
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
详细了解MVC+proxy
2021/07/09 Java/Android
Android开发实现极为简单的QQ登录页面
2022/04/24 Java/Android