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

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

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

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

<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <title>test</title>

    <script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.11.1/jquery.js"></script>

</head>

<body>

<button>test click me</button>

<script>

    $(document).ready(function(){

        $("button").toggle(function(){

            $("body").css("background-color", "green");

        }, function(){

            $("body").css("background-color", "red");

        }, function(){

            $("body").css("background-color", "yellow");

        });

    });

    $.fn.toggle = function( fn ) {

        // Save reference to arguments for access in closure

        var args = arguments,

                guid = fn.guid || jQuery.guid++,

                i = 0,

                toggler = function( event ) {

                    // Figure out which function to execute

                    var lastToggle = ( jQuery._data( this, "lastToggle" + fn.guid ) || 0 ) % i;

                    jQuery._data( this, "lastToggle" + fn.guid, lastToggle + 1 );

                    // Make sure that clicks stop

                    event.preventDefault();

                    // and execute the function

                    return args[ lastToggle ].apply( this, arguments ) || false;

                };

        // link all the functions, so any of them can unbind this click handler

        toggler.guid = guid;

        while ( i < args.length ) {

            args[ i++ ].guid = guid;

        }

        return this.click( toggler );

    }

</script>

</body>

</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. 使用java8

    刚开始一直使用的jdk7,但是学习spark的时候spark推荐Jdk8,很多示例程序都用到了lambda 机器上安装jdk8只是实验用途,默认还想使用jdk7 安装完后 网上说这是因为jdk8安装的 ...

  2. Clairewd’s message

    Problem Description Clairewd is a member of FBI. After several years concealing in BUPT, she interce ...

  3. C#高级特性

    1.接口 接口与抽象基类.抽象类与接口的不同是,抽象类不仅可以定义多态接口还可以定义一些其他的成员以及构造函数.而接口只能包含抽象成员. 抽象父类创建多态接口,只有派生类才可以.而往往很多情况下非派生 ...

  4. [Java] Eclipse+Spring学习（一）环境搭建

    转自:http://blog.sina.com.cn/s/blog_7c3736810100qhia.html 最近由于投了一家公司实习,他要java工程师,而我大学3年的精力都花到了ASP.NET和 ...

  5. 【Android 界面效果23】LayoutInflater作用及使用

    作用:  1.对于一个没有被载入或者想要动态载入的界面, 都需要使用inflate来载入. 2.对于一个已经载入的Activity, 就可以使用实现了这个Activiyt的的findViewById方 ...

  6. ASP.Net 验证控件 RegularExpressionValidator

    定义和用法 RegularExpressionValidator 控件用于验证输入值是否匹配指定的模式. 注释:除非浏览器不支持客户端验证或 EnableClientScript 属性被设置为 fal ...

  7. CSS之上边栏

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. Linux学习笔记---【1】

    什么是POSIX? 为何说Linux使用POSIX对于开发有很好的影响? POSIX是可携式操作系统接口(Portable Operating System Interface)的缩写,重点在于规范内 ...

  9. LAMP+Proftpd+数据迁移

    on Centos 6.5 64bit minimal 安装mysql [root@ftp ~]# yum install -y mysql mysql-server mysql-devel  --安 ...

  10. TableViewCell自适应高度

    //初始化TableView时设置 self.tv.estimatedRowHeight=54;self.tv.rowHeight=UITableViewAutomaticDimension;