Jquery 中toggle的用法举例

时间：2022-06-30 08:26:32

toggle用法是使得两个以上的方法交替出现。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>toggles demo</title>

    <script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"

        type="text/javascript"></script>

    <script>

        $(function () {

            $("#btn").toggle(function () {

                $(this).next().hide();

            }, function () {

                $(this).next().show("slow");

            }

                );

            $("div").bind("mouseover mouseout", function () {

                $(this).toggleClass("over")

            });

        });

    </script>

    <style type="text/css">

        .over {

            background-color:red;

        }

    </style>

</head>

<body>

    <div>

        <input id="btn" type="button" name="btn" title="click me" value="点击我" />

        <button id="delAll">删除所有</button>

    </div>

    <div id="test">nihao

    </div>

</body>

</html>

相关文章