The jquery toggle method has no effect?

<!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">
        -sharpdiv1 {
            font-size: 9pt;
            background-color: -sharp9FF;
            height: 300px;
            width: 400px;
            border: 1px solid -sharp000;
        }
    </style>
    <script type="text/javascript" src="jQuery/jquery-1.10.2.js"></script>
    <script type="text/javascript">



        $(document).ready(function (e) {
            //
            $("-sharpdiv1").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>

what is the cause of clicking div without discoloration


use the old version of jquery, or use the jQuery Migrate plug-in


your jq version is 1.10, and the toggle function has been removed since jq 1.9, so when you call the toggle method, you will report that the method does not exist, it is recommended to call the following version.


several functions have been replaced in jquery-2.2.3.js in the latest JQuery library. It should be said that the version was eliminated after 1.8 or 1.9.
toggle () 1.8 + obsolete
jQuery Migrate (Migration) plug-ins can restore this feature.
details: http://www.css88.com/jqapi-1.

Menu