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>

 

posted @ 2015-07-16 14:23  你听的到  阅读(3965)  评论(0)  编辑  收藏  举报