微客导航 » 文章资讯 » jQuery中slideUp 和 slideDown 的点击事件

jQuery中slideUp 和 slideDown 的点击事件

2024-04-04 01:10:04 493

先贴代码，再讲详细事件


<!DOCTYPEhtml>

<html>

   <head>

       <metacharset="utf-8">

       <title></title>

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

   </head>

   <styletype="text/css">

       div.panel,p.flip

       {

       margin:0px;

       padding:5px;

       text-align:center;

       background:#e5eecc;

       border:solid1px#c3c3c3;

       }

       div.panel

       {

       height:120px;

       }

   </style>

   <body>

       <divclass="panel">

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

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

       </div>

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

       <scripttype="text/javascript">

           $(document).ready(function(){

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

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

               });

           });

       </script>   

   </body>

</html>

重点（Tips）:

1、click事件按钮的选择

在这个断码中是 “.flip”

2、节点的选择

在这段代码中是“.panel”

再贴一段代码


       <scripttype="text/javascript">

           $(document).ready(function(){

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

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

               });

           });

       </script>

.slideToggle事件

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

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

返回顶部
3162201930
czq8825@qq.com

jQuery中slideUp 和 slideDown 的点击事件

热门推荐

随机推荐