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 相关文章推荐
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
Nov 30 Javascript
浅谈JavaScript 框架分类
Nov 10 Javascript
浅谈javascript 迭代方法
Jan 21 Javascript
JSON+Jquery省市区三级联动
Jan 13 Javascript
Jquery 整理元素选取、常用方法一览表
Nov 26 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
Nov 10 Javascript
Vue验证码60秒倒计时功能简单实例代码
Jun 22 Javascript
layui弹出框Tab选项卡的示例代码
Sep 04 Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 Javascript
基于JavaScript实现留言板功能
Mar 16 Javascript
原生js实现贪吃蛇游戏
Oct 26 Javascript
JavaScript设计模式之原型模式详情
Jun 21 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语法(2)
2006/10/09 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
php中关于长度计算容易混淆的问题分析
2016/05/27 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
js 设置选中行的样式的实现代码
2010/05/24 Javascript
js类型检查实现代码
2010/10/29 Javascript
解读JavaScript中 For, While与递归的用法
2013/05/07 Javascript
angular.element方法汇总
2015/01/07 Javascript
PHP中CURL的几个经典应用实例
2015/01/23 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
2015/06/08 Javascript
Web打印解决方案之证件套打的实现思路
2016/08/29 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
jQuery事件对象总结
2016/10/17 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
过期软件破解办法实例详解
2017/01/04 Javascript
js验证手机号、密码、短信验证码代码工具类
2020/06/24 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
200行自定义python异步非阻塞Web框架
2017/03/15 Python
Python向日志输出中添加上下文信息
2017/05/24 Python
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
python opencv之SIFT算法示例
2018/02/24 Python
python3实现字符串的全排列的方法(无重复字符)
2018/07/07 Python
配置 Pycharm 默认 Test runner 的图文教程
2018/11/30 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
七年级生物教学反思
2014/01/30 职场文书
管理提升方案
2014/06/04 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
工程催款通知书
2015/04/17 职场文书
如何使JavaScript休眠或等待
2021/04/27 Javascript