jQuery切换事件

本文转载自查看原文 2015-07-16 14:23 3633 前端技术

有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>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 JQuery切换事件 jQuery多次点击事件切换状态 jQuery菜单切换 jquery点击切换在点击切换 jquery点击切换在点击切换 JS tab切换事件 jquery点击来回切换 jQuery TAB栏切换 bootstrap-switch,切换触发事件及动态切换浏览器切换窗口事件