jQuery中slideUp 和 slideDown 的点击事件

230 阅读 0 评论 152 点赞

我是靠谱客的博主清秀玉米，最近开发中收集的这篇文章主要介绍jQuery中slideUp 和 slideDown 的点击事件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

先贴代码，再讲详细事件

复制代码代码如下:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

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

    </head>

    <style type="text/css"> 

        div.panel,p.flip

        {

        margin:0px;

        padding:5px;

        text-align:center;

        background:#e5eecc;

        border:solid 1px #c3c3c3;

        }

        div.panel

        {

        height:120px;

        }

    </style>

    <body>

        <div class="panel">

            <p>W3School - 领先的 Web 技术教程站点</p>

            <p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>

        </div>

            <p class="flip">请点击这里</p>

        <script type="text/javascript">

            $(document).ready(function(){

                $(".flip").click(function(){

                    $(".panel").slideUp(300);

                });

            });

        </script>    

    </body>

</html>

重点（Tips）:

1、click 事件按钮的选择

在这个断码中是 “.flip”

2、节点的选择

　　在这段代码中是 “.panel”

再贴一段代码

复制代码代码如下:

        <script type="text/javascript">

            $(document).ready(function(){

                $(".flip").click(function(){

                    $(".panel").slideToggle(300);

                });

            });

        </script>

.slideToggle 事件

将这个滑动效果进行了 Up 和 Down 的2中效果都展示出来

以上内容就是关于jQuery中slideUp 和 slideDown 的详细讲解了，希望大家能够喜欢。