jQuery中slideUp 和 slideDown 的点击事件

前端技术 2023/09/06 JavaScript

先贴代码，再讲详细事件

复制代码 代码如下:

<!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 的详细讲解了，希望大家能够喜欢。

本文地址：https://www.stayed.cn/item/16149

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案