jquery toggle方法没有效果?

wanwanwan
  • 187
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>toggle事件示例</title>
    <style type="text/css">
        #div1 {
            font-size: 9pt;
            background-color: #9FF;
            height: 300px;
            width: 400px;
            border: 1px solid #000;
        }
    </style>
    <script type="text/javascript" src="jQuery/jquery-1.10.2.js"></script>
    <script type="text/javascript">



        $(document).ready(function (e) {
            //鼠标单击时改变背景颜色
            $("#div1").toggle(
                //第1次单击更改为绿色
                function () {
                    $(this).css("background-color", "green");
                },
                //第2次单击更改为红色
                function () {
                    $(this).css("background-color", "red");
                },
                //第3次单击更改为黄色
                function () {
                    $(this).css("background-color", "yellow");
                }
            );
        });
    </script>
</head>

<body>
    <div id="div1">单击这里更改颜色</div>
</body>

</html>

点击div没有变色是什么原因造成的

评论
阅读 1.9k
3 个回答

用旧版jquery,或者使用jQuery Migrate插件

你用的jq版本是1.10, 而toggle函数自jq 1.9开始就已经被移除了, 所以你调用toggle方法的时候, 会报方法不存在,建议调用1.9以下版本。

在最新的JQuery的程序库中jquery-2.2.3.js中已经有好几个函数被替换到了。应该说版本过1.8或1.9时就淘汰了。
toggle() 1.8以上被淘汰
jQuery Migrate(迁移)插件可以恢复此功能。
详情:http://www.css88.com/jqapi-1....

撰写回答

登录后参与交流、获取后续更新提醒

宣传栏