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 相关文章推荐
ExtJS 2.2.1的grid控件在ie6中的显示问题
May 04 Javascript
菜鸟学习JavaScript小实验之函数引用
Nov 17 Javascript
JS.findElementById()使用介绍
Sep 21 Javascript
javascript代码运行不出来执行错误的可能情况整理
Oct 18 Javascript
JavaScript学习笔记之数组去重
Mar 23 Javascript
Sea.JS知识总结
May 05 Javascript
全面解析Bootstrap中nav、collapse的使用方法
May 22 Javascript
vue中简单弹框dialog的实现方法
Feb 26 Javascript
玩转Koa之koa-router原理解析
Dec 29 Javascript
Vue封装的组件全局注册并引用
Jul 24 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
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
神族 Protoss 剧情介绍
2020/03/14 星际争霸
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
Laravel 中创建 Zip 压缩文件并提供下载的实现方法
2019/04/02 PHP
JS代码格式化和语法着色V2
2006/10/14 Javascript
jquery插件之easing使用
2010/08/19 Javascript
javascript中有趣的反柯里化深入分析
2012/12/05 Javascript
JS实现slide文字框缩放伸展效果代码
2015/11/05 Javascript
javascript实现随机显示星星特效
2016/01/28 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
ES6中Proxy代理用法实例浅析
2017/04/06 Javascript
ES6新特性五:Set与Map的数据结构实例分析
2017/04/21 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
[55:32]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第二场
2018/04/05 DOTA
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
Python中.py文件打包成exe可执行文件详解
2017/03/22 Python
python下载文件记录黑名单的实现代码
2017/10/24 Python
Python对列表去重的多种方法(四种方法)
2017/12/05 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
windows下python和pip安装教程
2018/05/25 Python
Python单元和文档测试实例详解
2019/04/11 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
Python爬虫之Selenium实现窗口截图
2020/12/04 Python
python爬虫scrapy框架的梨视频案例解析
2021/02/20 Python
解析HTML5中的新功能本地存储localStorage
2016/03/01 HTML / CSS
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
adidas官方旗舰店:德国运动用品制造商
2017/11/25 全球购物
最热门的自我评价
2013/12/30 职场文书
大学毕业自我鉴定范文
2014/02/03 职场文书
《赵州桥》教学反思
2014/02/17 职场文书
给学校建议书范文
2014/05/13 职场文书
2015年七年级班主任工作总结
2015/05/21 职场文书
大学体育课感想
2015/08/10 职场文书
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang