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函数、方法、对象代码
Oct 29 Javascript
锋利的jQuery jQuery中的DOM操作
Mar 21 Javascript
js模仿jquery的写法示例代码
Jun 16 Javascript
js中同步与异步处理的方法和区别总结
Dec 25 Javascript
JS模拟并美化的表单控件完整实例
Aug 19 Javascript
全面理解JavaScript中的闭包
May 12 Javascript
浅谈Vuex的状态管理(全家桶)
Nov 04 Javascript
JS实现的DOM插入节点操作示例
Apr 04 Javascript
Webpack 4.x搭建react开发环境的方法步骤
Aug 15 Javascript
原生JS实现获取及修改CSS样式的方法
Sep 04 Javascript
Vue通过配置WebSocket并实现群聊功能
Dec 31 Javascript
Vue 数据绑定的原理分析
Nov 16 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采用curl模仿登录人人网发布动态的方法
2014/11/07 PHP
利用“多说”制作留言板、评论系统
2015/07/14 PHP
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法
2016/10/08 PHP
php socket通信简单实现
2016/11/18 PHP
JS 统计时间
2021/03/09 Javascript
用javascript连接access数据库的方法
2006/11/17 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
jQuery前台数据获取实现代码
2011/03/16 Javascript
JS实现模仿微博发布效果实例代码
2013/12/16 Javascript
js验证电话号码与手机支持+86的正则表达式
2014/01/23 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
Web程序员必备的7个JavaScript函数
2016/06/14 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
Vue.js添加组件操作示例
2018/06/13 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
2018/08/14 Javascript
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
2019/08/26 Javascript
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
python中for循环变量作用域及用法详解
2019/11/05 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式
2020/05/25 Python
德国网上花店:Valentins
2018/08/15 全球购物
党员公开承诺书
2014/03/25 职场文书
电视节目策划方案
2014/05/16 职场文书
超市客服工作职责
2014/06/11 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
小学班主任评语
2014/12/29 职场文书
庐山导游词
2015/02/03 职场文书
庆七一活动简报
2015/07/20 职场文书
nginx实现发布静态资源的方法
2021/03/31 Servers
Go遍历struct,map,slice的实现
2021/06/13 Golang
【海涛dota解说】海涛小满开黑4v5被破两路翻盘潮汐第一视角解说
2022/04/01 DOTA