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 相关文章推荐
JavaScript返回上一页的三种方法及区别介绍
Jul 04 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
Nov 21 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
javascript基础练习之翻转字符串与回文
Feb 20 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
Jul 18 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
Sep 28 Javascript
浅析JavaScript中的特殊数据类型
Dec 15 Javascript
微信小程序实现滚动消息通知
Feb 02 Javascript
在vue里面设置全局变量或数据的方法
Mar 09 Javascript
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
vue中@change兼容问题详解
Oct 25 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 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 ? EasyUI DataGrid 资料取的方式介绍
2012/11/07 PHP
PHP数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
php去掉文件前几行的方法
2015/07/29 PHP
php 运算符与表达式详细介绍
2016/11/30 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
解决 FireFox 下[使用event很麻烦] 的问题.
2006/08/22 Javascript
不错的asp中显示新闻的功能
2006/10/13 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/03 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
浅谈javascript中的加减时间
2016/07/12 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
2017/08/21 Javascript
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
微信小程序登录换取token的教程
2018/05/31 Javascript
vue将毫秒数转化为正常日期格式的实例
2018/09/16 Javascript
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
2020/08/03 Javascript
Javascript实现单选框效果
2020/12/09 Javascript
详解Python中with语句的用法
2015/04/15 Python
Python使用pickle模块存储数据报错解决示例代码
2018/01/26 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
django中forms组件的使用与注意
2019/07/08 Python
简单分析python的类变量、实例变量
2019/08/23 Python
django的autoreload机制实现
2020/06/03 Python
Python enumerate() 函数如何实现索引功能
2020/06/29 Python
python如何构建mock接口服务
2021/01/28 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
三星英国官网:Samsung英国
2018/09/25 全球购物
澳大利亚头发和美容产品购物网站:OZ Hair & Beauty
2020/03/27 全球购物
CSS代码检查工具stylelint的使用方法详解
2021/03/27 HTML / CSS
30年同学聚会感言
2014/01/30 职场文书
模具专业求职信
2014/06/26 职场文书
Python办公自动化解决world文件批量转换
2021/09/15 Python