toggle()隐藏问题的解决方法
最近编写一个实例的时候使用到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(); //阻止元素的默认动作(如果存在)
});
相关推荐
-
jquery中show()、hide()和toggle()用法实例
本文实例讲述了jquery中show().hide()和toggle()用法.分享给大家供大家参考.具体分析如下: 这里介绍了jquery效果:show()方法.hide()方法和toggle()方法 现实应用场景:QQ面板里我的好友分组 复制代码 代码如下: <html> <head> <title>jquery效果:show()方法.hide()方法和toggle()方法</title> <script type="text/javasc
-
jquery中的常用事件bind、hover、toggle等示例介绍
1.$(document).ready() $(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式.它和onload具有类似的效果.但是也有一些差异: 当一个文档完全下载到浏览器中时,会触发window.onload事件.而使用$(document).ready()注册的事件处理程序会在html下载完成并解析为Dom树之后,代码就可以运行,但并不意味着所有关联文件都已经下载完毕. 一个页面中一般只有一个onload事件处理程序
-
jQuery toggleClass应用实例(附效果图)
1.首先到jQuery官网下载js库,网址为http://jquery.com/ 2.建立一个jQuery示例的项目. 3.将js库放到jQuery示例的项目中. 4.写一个html页面 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head
-
用jQuery toggleClass 实现鼠标移上变色
按钮移上变色效果 复制代码 代码如下: <style> .round-corner-btn { -moz-border-radius:4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; width:200px; height:40px; line-height: 40px; background: green; display:inline-block; color:white; tex
-
Bootstarp风格的toggle效果分享
最近在写项目的时候想要一个这样的效果, 我知道这个效果在 flat-ui中有, 但是我又不想引用一整个flat-ui; 这个效果依赖html5的transition, 所以浏览器兼容成问题: 从flat-ui中把这个效果的js和html,以及css给拨离出来: 整体的代码如下: 运行下面代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></ti
-
jquery中交替点击事件toggle方法的使用示例
复制代码 代码如下: $('#clickId').toggle( function(){$('#divId').hide();}, function(){$('#divId').show();} ); toggle方法中有两个参数,分别是要交替执行的事件.如果不传参默认是显示隐藏功能
-
toggle()隐藏问题的解决方法
最近编写一个实例的时候使用到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 an
-
Android判断软键盘弹出并隐藏的简单完美解决方法(推荐)
最近项目中有一个编辑框,下面是个ListView.在触发编辑框弹出软键盘后,ListView还能滑动,并且ListView的item还能响应单击.这样的体验效果很不好.于是便想在滑动或单击item时判断键盘是否弹出,若弹出,则把它隐藏. 网上一搜,发现Android并没有直接提供软键盘的弹出与隐藏判断,一些解决方案诸如判断父控件的高度或者判断 if(getWindow().getAttributes().softInputMode==WindowManager.LayoutParams.SOFT
-
给Easyui-Datebox设置隐藏或者不可用的解决方法
我们公司做的是一套安全监测系统.所以呢对于前台页面没有像一些门户网站布局那么丰富,特效特别炫.目前只需要一套简单的UI界面即可,所以我选择了用easyui进行搭建,easyui是一种基于jQuery的用户界面插件集合.使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面.方便而且也比较美观.但是随着项目的进展,对于一些功能的选择上,需要给一些元素加一些样式.渐渐我发现easyui的一些控件对css的兼容性不是很好.于是我总结了一些解决方法如下,我解决的是e
-
nginx 隐藏版本号与WEB服务器信息的解决方法
nginx不仅可以隐藏版本信息,还支持自定义web服务器信息 先看看最终的隐藏结果吧 具体怎么实现呢,其实也很简单,请往下看 1 官网下载最新稳定版 wget http://nginx.org/download/nginx-1.14.1.tar.gz 2 解压 tar -xf nginx-1.14.1.tar.gzcd nginx-1.14.1 3 修改C文件 (1)vim src/http/ngx_http_header_filter_module.c #修改49行 static u_char
-
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
本文实例讲述了Angularjs在初始化未完毕时出现闪烁问题的解决方法.分享给大家供大家参考,具体如下: 方法1: 使用ng-cloak指令,在绑定数据的区域使用该指令并设置该指令的样式为隐藏即可,如下所示: Html: <body ng-controller="QuberController" ng-cloak class="ng-cloak"> Css: .ng-cloak { display: none; } 方法2: 使用ng-bind指令来代替
-
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Swiper是目前较为流行的移动端触摸滑动插件,因为其简单好用易上手,受到很多前端开发者的欢迎. 今天在使用Swiper的时候遇到这个问题: 使用angularjs动态循环生成swiper-slide类,在swiper-wrapper里生成6个以上的滑动页,可是就是划不到第二页,尝试将longSwipesRatio的值修改到最小,仍然不起作用. <div class="swiper-wrapper" > <!-- =======循环部分======= --> &
-
Android编程使WebView支持HTML5 Video全屏播放的解决方法
本文实例讲述了Android编程使WebView支持HTML5 Video全屏播放的解决方法.分享给大家供大家参考,具体如下: 1)需要在AndroidManifest.xml文件中声明需要使用HardwareAccelerate, 可以细化到Activity级别,如果不需要的View可以声明不要用加速,但是需要在代码中做,具体如下: a. 如果要声明整个应用都要加速: 复制代码 代码如下: <application ... android:hardwareAccelerated ="tr
-
无法显示隐藏文件夹(修改过注册表也无效)的解决方法 附注册表文件
显示隐藏文件的通法: 正常情况下,按照如下顺序操作即可:打开"我的电脑"的"工具"菜单--"文件夹选项",在"查看"标签里,选择"显示所有文件和文件夹",并找到"隐藏受保护的操作系统文件(推荐)",将前面的勾去掉.如下图所示: 被病毒修改注册表后导致无法显示隐藏文件的解决方法: 如果是由于病毒所导致的,则有很多种情况,这里说一下较常用的两种方法. 法一:打开注册表编辑器,进入注册表项:H
-
开机后 自动出来我的文档窗口的解决方法
本站提供了两种解决方法:1, 你Msconfig内多了启动我的文档项目. 这个好办, msconfig里去掉就可以了. 2, 估计你是中了wsctf.exe和explorer.exe病毒. 如果这样 可以手动清除 (1) 按"Ctrl+Alt+Del"调出Windows任务管理器,结束掉EXPLORER.EXE进程,其中EXPLORER.EXE进程有两个,一个是系统的,一个是病毒的,系统的所在位置是"C:\WINDOWS",病毒的所在位置是"C:\WIND
-
iOS11适配工作及导航栏影藏返回文字的解决方法
前言 本文主要介绍了关于iOS11适配及导航栏影藏返回文字的解决方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一.iOS11适配工作 这是一篇 WWDC Session 204 "Updating Your App for iOS 11" 的总结,里面的内容涉及到了产品.设计以及开发需要了解的内容. 在 "iPad" 以及 "iPhone 的 Landscape" 下, UITabBarItem 图片和文字并排排列了,并
随机推荐
- mysql数据库索引损坏及修复经验分享
- jquery调用wcf并展示出数据的方法
- JS判断两个对象内容是否相等的方法示例
- 瑞星反病毒20041231_日报
- 详解JAVA中的for-each循环与迭代
- Java语言一元运算符实例解析
- perl 删除数组元素的几种方法小结
- C#实现任意数据类型转成json格式输出
- 理解JavaScript变量作用域更轻松
- asp.net 长文章通过设定的行数分页
- Python 稀疏矩阵-sparse 存储和转换
- NaviCat连接时提示"不支持远程连接的MySql数据库"解决方法
- 5个书写JavaScript代码的坏习惯,看看你中枪了没?
- MSSQL 首字母替换成大写字母
- mysql 有关“InnoDB Error ib_logfile0 of different size”错误
- Android录制声音文件(音频)并播放
- Java创建内部类对象实例详解
- Mybatis接口式编程的原理
- IOS 基础之nil,NULL,NSNULL区别详解
- 基于使用递归推算指定位数的斐波那契数列值的解决方法