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(); //阻止元素的默认动作（如果存在）
});

赞 (0)

相关推荐

  • Bootstarp风格的toggle效果分享

    Bootstarp风格的toggle效果分享

    最近在写项目的时候想要一个这样的效果, 我知道这个效果在 flat-ui中有, 但是我又不想引用一整个flat-ui; 这个效果依赖html5的transition, 所以浏览器兼容成问题: 从flat-ui中把这个效果的js和html,以及css给拨离出来: 整体的代码如下: 运行下面代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></ti

  • 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中交替点击事件toggle方法的使用示例

    复制代码 代码如下: $('#clickId').toggle( function(){$('#divId').hide();}, function(){$('#divId').show();} ); toggle方法中有两个参数,分别是要交替执行的事件.如果不传参默认是显示隐藏功能

  • jQuery toggleClass应用实例(附效果图)

    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

  • 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全屏播放的解决方法

    本文实例讲述了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适配及导航栏影藏返回文字的解决方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一.iOS11适配工作 这是一篇 WWDC Session 204 "Updating Your App for iOS 11" 的总结,里面的内容涉及到了产品.设计以及开发需要了解的内容. 在 "iPad" 以及 "iPhone 的 Landscape" 下, UITabBarItem 图片和文字并排排列了,并

随机推荐