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 相关文章推荐
微信中一些常用的js方法汇总
Mar 12 Javascript
详细解读AngularJS中的表单验证编程
Jun 19 Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
js实现点击每个li节点,都弹出其文本值及修改
Dec 15 Javascript
Web技术实现移动监测的介绍
Sep 18 Javascript
使用Angular CLI从蓝本生成代码详解
Mar 24 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
Aug 10 Javascript
Angular6封装http请求的步骤详解
Aug 13 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
Jan 16 Javascript
利用js实现简易红绿灯
Oct 15 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
简单采集了yahoo的一些数据
2007/02/14 PHP
php数据结构与算法(PHP描述) 快速排序 quick sort
2012/06/21 PHP
cakephp打印sql语句的方法
2015/02/13 PHP
php文件操作之小型留言本实例
2015/06/20 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
append和appendTo的区别以及appendChild用法
2013/12/24 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
2015/03/13 Javascript
javascript用函数实现对象的方法
2015/05/14 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
2016/01/26 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
Vue2实现组件props双向绑定
2016/12/02 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
jQuery序列化后的表单值转换成Json
2017/06/16 jQuery
JsChart组件使用详解
2018/03/04 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
2018/03/21 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
2018/11/25 Javascript
nodejs中方法和模块用法示例
2018/12/24 NodeJs
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
python实现给字典添加条目的方法
2014/09/25 Python
Python中的多重装饰器
2015/04/11 Python
Python 3.x 新特性及10大变化
2015/06/12 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
Python中six模块基础用法
2019/12/08 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
加拿大时尚床上用品零售商:QE Home | Quilts Etc
2018/01/22 全球购物
澳大利亚香水在线商店:City Perfume
2020/09/02 全球购物
揭牌仪式主持词
2014/03/19 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
浅谈mysql返回Boolean类型的几种情况
2021/06/04 MySQL
Android Flutter实现图片滑动切换效果
2022/04/07 Java/Android
MySQL的prepare使用以及遇到的bug
2022/05/11 MySQL