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 相关文章推荐
基于jQuery的360图片展示实现代码
Jun 14 Javascript
导航跟随滚动条置顶移动示例代码
Sep 11 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
Dec 19 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
jquery操作ID带有变量的节点实例
Dec 07 Javascript
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 Javascript
VUE长按事件需求详解
Oct 18 Javascript
Vue组件化开发思考
Feb 02 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
Nov 26 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
php5 mysql分页实例代码
2008/04/10 PHP
php采集速度探究总结(原创)
2008/04/18 PHP
Zend Framework入门教程之Zend_Db数据库操作详解
2016/12/08 PHP
laravel实现简单用户权限的示例代码
2019/05/28 PHP
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
2013/05/06 Javascript
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
javascript操作referer详细解析
2014/03/10 Javascript
单击某一段文字改写文本颜色
2014/06/06 Javascript
javascript制作2048游戏
2015/03/30 Javascript
判断访客终端类型集锦
2015/06/05 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
2015/06/25 Javascript
详细分析JavaScript变量类型
2015/07/08 Javascript
JavaScript实现图片轮播的方法
2015/07/31 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
用JS实现简单的登录验证功能
2017/07/28 Javascript
Vue2.0 组件传值通讯的示例代码
2017/08/01 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
详解Angular5路由传值方式及其相关问题
2018/04/28 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
2019/04/10 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
Python中针对函数处理的特殊方法
2014/03/06 Python
python解析xml文件操作实例
2014/10/05 Python
Python 装饰器使用详解
2017/07/29 Python
selenium+python自动化测试之环境搭建
2019/01/23 Python
如何在python中实现随机选择
2019/11/02 Python
python实现低通滤波器代码
2020/02/26 Python
Python 输出详细的异常信息(traceback)方式
2020/04/08 Python
flask项目集成swagger的方法
2020/12/09 Python
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
最经典的大学生职业生涯规划范文
2014/03/05 职场文书
2015入党自荐书范文
2015/03/05 职场文书
银行求职信模板
2015/03/20 职场文书
php去除数组中为0的元素的实例分析
2021/11/17 PHP
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js