jQuery切换事件

有html页面内容如下:
<body>

<h5 id="hh">关于jQuery的介绍</h5>

<p id="p1">jQuery是一门前端编程语言</p>

</body>

需要实现点击标题显示和隐藏段落的功能。

第一种通过点击方法实现,代码如下,需要注意is(":visible")的使用

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <script src="../script/jquery-2.1.4.js"></script>

    <title></title>

    <script>

        $(function(){

            $("#hh").click(function(){

               if($(this).next().is(":visible")){

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

               }

                else{

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

               }

            });

        });

    </script>

</head>

<body>

<h5 id="hh">关于jQuery的介绍</h5>

<p id="p1">jQuery是一门前端编程语言</p>

</body>

</html>

第二种方法通过toggle使用,当toggle代码如下时,效果是先出现一段文字

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <script src="../script/jquery-2.1.4.js"></script>

    <title>toggle</title>

    <script>

    $(function(){

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

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

        },function(){

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

        })

    })

    </script>

</head>

<body>

<h5 id="hh">关于jQuery的介绍</h5>

<p id="p1">jQuery是一门前端编程语言</p>

</body>

</html>

而要实现点击切换的效果,新的jQuery代码应该是:

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <script src="../script/jquery-2.1.4.js"></script>

    <title>toggle</title>

    <script>

        $(function(){

            $("#hh").click(function(){

                $(this).next().toggle(600);

            },function(){

                $(this).next().toggle(600);

            })

        })

    </script>

</head>

<body>

<h5 id="hh">关于jQuery的介绍</h5>

<p id="p1">jQuery是一门前端编程语言</p>

</body>

</html>

 

你可能感兴趣的:(jquery)