jQuery的toggle()方法应该是在鼠标点击后才会触发，现在的问题是在ready加载后就自动触发了，怎么回事呢？

答案是jQuery的版本问题，在1.9以后的版本toggle()就存在这个问题，用之前的版本就正常了。​

如果你非常喜欢这个功能，有2个办法，一个办法是jquery官网提供的一个版本升级文件。http://blog.jquery.com/2013/05/08/jquery-migrate-1-2-1-released/

另外一个办法是笨办法，就是把原来的那块代码拿出来，写成一个插件。

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>test</title>
  6.     <script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.11.1/jquery.js"></script>
  7. </head>
  8. <body>
  9. <button>test click me</button>
  10. <script>
  11.     $(document).ready(function(){
  12.         $("button").toggle(function(){
  13.             $("body").css("background-color", "green");
  14.         }, function(){
  15.             $("body").css("background-color", "red");
  16.         }, function(){
  17.             $("body").css("background-color", "yellow");
  18.         });
  19.     });
  20.  
  21.     $.fn.toggle = function( fn ) {
  22.         // Save reference to arguments for access in closure
  23.         var args = arguments,
  24.                 guid = fn.guid || jQuery.guid++,
  25.                 i = 0,
  26.                 toggler = function( event ) {
  27.                     // Figure out which function to execute
  28.                     var lastToggle = ( jQuery._data( this, "lastToggle" + fn.guid ) || 0 ) % i;
  29.                     jQuery._data( this, "lastToggle" + fn.guid, lastToggle + 1 );
  30.  
  31.                     // Make sure that clicks stop
  32.                     event.preventDefault();
  33.  
  34.                     // and execute the function
  35.                     return args[ lastToggle ].apply( this, arguments ) || false;
  36.                 };
  37.  
  38.         // link all the functions, so any of them can unbind this click handler
  39.         toggler.guid = guid;
  40.         while ( i < args.length ) {
  41.             args[ i++ ].guid = guid;
  42.         }
  43.  
  44.         return this.click( toggler );
  45.     }
  46. </script>
  47. </body>
  48. </html>

jQuery的toggle()的自动触发真烦人的更多相关文章

  1. 解决jQuery的toggle()的自动触发问题

    在1.9以后的版本toggle()就存在这个问题,用之前的版本就正常了 解决办法: 1.去 jquery官网下载一个版本升级文件.http://blog.jquery.com/2013/05/08/j ...

  2. 使用jQuery中trigger()方法自动触发事件

    一.常用事件 在页面加载完成时  自动触发input的点击事件,在移动端可以实现自动弹出输入法,获得焦点 $("input").trigger("click") ...

  3. jQuery 学习笔记（5）（事件绑定与解绑、事件冒泡与事件默认行为、事件的自动触发、自定义事件、事件命名空间、事件委托、移入移出事件）

    1.事件绑定: .eventName(fn) //编码效率略高,但部分事件jQuery没有实现 .on(eventName, fn) //编码效率略低,所有事件均可以添加 注意点:可以同时添加多个相同 ...

  4. jquery自动触发click事件

    $("").trigger("click"); //jquery的自动触发事件

  5. 原生js自动触发事件

    熟悉jquery的童鞋都知道在jq中有一个方法可以自动触发事件,那就是trigger(),那么通过原生js又怎么模拟触发呢? js中添加一个主动触发事件的方法有dispatch.该方法能模拟用户行为, ...

  6. jQuery实现用户输入自动完成功能

    jQuery实现用户输入自动完成功能 利用jQuery UI中Auto-complete插件实现输入自动完成功能,大家在使用诸如淘宝.京东等电商平台搜索商品时,往往只要输入商品的一些特殊字符,就可以显 ...

  7. jQuery的事件绑定与触发 - 学习笔记

    jQuery的事件绑定与触发 事件绑定 自动触发事件 常用的鼠标事件 事件冒泡和默认行为 事件冒泡 默认行为 获得当前鼠标的位置和按键 jQuery的事件绑定与触发 事件绑定 基本绑定 $(eleme ...

  8. TeamCity : 自动触发 Build

    创建了 build 的配置以后,您既可以手动点击 "Run" 按钮来触发一次 build 过程,也可以通过 Triggers 配置实现自动触发 build 过程.一个 trigge ...

  9. ionic下拉加载自动触发

    ionic提供的下拉加载,是要滑动去下拉加载,没有提供api自动触发下拉加载,比如刚进页面,或者切换tab时想触发一次下拉加载. 添加如下service: angular.module('YourAp ...

随机推荐

  1. PHP版根据经纬度和半径计算出经纬度的范围

    百度地图提供了范围搜索的功能,但是它使用的是百度自己的数据,但是有时候我们需要使用自己的数据,显示在地图上.比如给定两个参数:指定位置(某一处的经纬度lnglat)和搜索半径(r),搜索指定范围内的数 ...

  2. 使用getUserMedia 调用摄像头

    html5中一个有趣的 API,能够调用电脑的摄像头,结合 <video> 标签和 Canvas 就能在浏览器中拍摄照片了. 这里需要注意: 因为安全问题, chrome 对于本地文件禁用 ...

  3. LeetCode37 Sudoku Solver

    题目: Write a program to solve a Sudoku puzzle by filling the empty cells. Empty cells are indicated b ...

  4. itextsharp去掉PDF加密

    在操作PDF文件时会遇到PDF文件加密了,不能操作的问题,从网络中查找资料一上午,鼓捣出如下的代码,可实现将已加密的PDF转化成未加密的PDF文件,纯代码,无需借助PDF解密软件,使用前需要导入如下引 ...

  5. 【Open Search产品评测】－－ 淘点点：基于OpenSearch，轻松实现一整套O2O类搜索解决方案

     [Open Search产品评测]--  淘点点:基于OpenSearch,轻松实现一整套O2O类搜索解决方案   [使用背景] 我们淘点点团队应该可以算是内网首批使用opensearch来搭建应用 ...

  6. Ios入门

    storyboard 文件的认识 用来描述软件界面 默认情况下程序启动就会加载Main.storyboard 加载storyboard时,会首先创建和显示箭头所指向的控制器界面 什么是UIscroll ...

  7. linux_memcached_memcachedb

    三个区别 当你听到memcache与memcached时把它当做是一个东东就好了,尽管它们存在区别,但是这并不影响你对它们的运用及理解. “Memcache”它是一个自由和开放源代码.高性能.分配的内 ...

  8. centos7上源码安装mysql5.7.11

    由于初学,安装这玩意搞了三天,其间各种报错难以解决,网上各种解答误导.最好的办法还是使用官方的英文文档,建议初学者一定要使用官方的文档,特别是下面两个页面作为初学者一定要细看: Installing ...

  9. 跨域 HTTP 请求

    如果你需要从不同的服务器(不同域名)上获取数据就需要使用跨域 HTTP 请求. 跨域请求在网页上非常常见.很多网页从不同服务器上载入 CSS, 图片,Js脚本等. 在现代浏览器中,为了数据的安全,所有 ...

  10. Eclipse+ADT+Android SDK 搭建安卓开发环境

    Eclipse+ADT+Android SDK 搭建安卓开发环境   要求 必备知识 windows 7 基本操作. 运行环境 windows 7(64位); eclipse-jee-luna-SR2 ...