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获取电脑信息(是使用与IE浏览器)
Jan 15 Javascript
javascript闭包(Closure)用法实例简析
Nov 30 Javascript
原生javascript实现addClass,removeClass,hasClass函数
Feb 25 Javascript
浅谈JQ中mouseover和mouseenter的区别
Sep 13 Javascript
浅谈Vue的基本应用
Dec 27 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
Apr 26 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 Javascript
浅谈Vue.nextTick 的实现方法
Oct 25 Javascript
Angular开发实践之服务端渲染
Mar 29 Javascript
Layui tree 下拉菜单树的实例代码
Sep 21 Javascript
layui多图上传实现删除功能的例子
Sep 23 Javascript
JavaScript利用html5新方法操作元素类名详解
Nov 27 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 下载文件时自动添加bom头的方法实例
2014/01/10 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
离开页面时检测表单元素是否被修改,提示保存的js代码
2010/08/25 Javascript
JavaScript解析URL参数示例代码
2013/08/12 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
jquery判断当前浏览器的实现代码
2015/11/07 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
JavaScrip常见的一些算法总结
2015/12/28 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
2016/05/17 Javascript
canvas实现粒子时钟效果
2017/02/06 Javascript
Nodejs之TCP服务端与客户端聊天程序详解
2017/07/07 NodeJs
jquery应用实例分享_实现手风琴特效
2018/02/01 jQuery
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
2018/05/04 Javascript
vue移动端轻量级的轮播组件实现代码
2018/07/12 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
详解vue中$nextTick和$forceUpdate的用法
2019/12/11 Javascript
[01:44]Ti10举办地公布
2019/08/25 DOTA
python3.5使用tkinter制作记事本
2016/06/20 Python
python实现在函数图像上添加文字和标注的方法
2019/07/08 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
Python爬虫之爬取淘女郎照片示例详解
2020/07/28 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
介绍Ibatis的核心类
2013/11/18 面试题
中学生差生评语
2014/01/30 职场文书
党日活动总结
2014/05/07 职场文书
政府信息公开实施方案
2014/05/09 职场文书
地理信息科学专业推荐信
2014/09/08 职场文书
交通违章检讨书
2014/09/21 职场文书
优秀工作者事迹材料
2014/12/26 职场文书
2015年信访维稳工作总结
2015/04/07 职场文书
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js
HttpClient实现表单提交上传文件
2022/08/14 Java/Android