jQuery toggle() 方法

  • 定义和用法

    toggle() 方法在 jQuery 1.8 版本中被废弃,在 jQuery 1.9 版本中被移除。
    toggle() 方法添加两个或多个函数,以响应被选元素的 click 事件之间的切换。
    当在元素上点击时调用第一个指定函数,当再次点击时调用第二个函数,以此类推。
  • 语法

    $(selector).toggle(function)
  • 参数

    参数 描述
    function 必需。每当被选元素被点击时要运行的函数。
  • 示例

    下例演示了当点击<p>元素时进行颜色切换:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>欢迎来到蝴蝶教程</title>
        //此版本是bootcss 1.7,测试toggle方法
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.7/jquery.min.js"></script>
        <script>
          $(document).ready(function () {
             $("p").toggle(
                function(){
                    $("p").css({"color":"red"});
                },
                function(){
                    $("p").css({"color":"blue"});
                },
                function(){
                    $("p").css({"color":"green"});
             });
          });
        </script>
    </head>
    <body>
        <p style="font-size:40px">点击我变色。</p>
        <div style="color:red"> <b>注意: </b>toggle() 方法在 jQuery 版本 1.8 中被废弃,在版本 1.9 中被移除。 </div>
    </body>
    </html>
    
    尝试一下