jQuery中slideUp 和 slideDown 的点击事件

2019/6/29 22:29:51

编程Tag： jQuery slideUp slideDown

本文主要是介绍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 的详细讲解了，希望大家能够喜欢。

这篇关于jQuery中slideUp 和 slideDown 的点击事件的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

jQuery中slideUp 和 slideDown 的点击事件

相关编程文章