Click events of slideUp and slideDown in jQuery-JS Tutorial-php.cn

Click events of slideUp and slideDown in jQuery

巴扎黑

Release： 2017-06-29 11:22:41

Original

1536 people have browsed it

This article mainly introduces the relevant information about the click events of slideUp and slideDown in jQuery. Friends in need can refer to it

Post the code first, and then talk about the detailed events

The code is as follows:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/jquery.js"></script>
    </head>
    <style type="text/css"> 
        p.panel,p.flip
        {
        margin:0px;
        
padding
:5px;
        
text-align
:center;
        
background
:#e5eecc;
        border:solid 1px #c3c3c3;
        }
        p.panel
        {
        height:120px;
        }
    </style>
    <body>
        <p class="panel">
            <p>W3School - 领先的 Web 技术教程站点</p>
            <p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
        </p>
            <p class="flip">请点击这里</p>
        <script type="text/
javascript
">
            $(
document
).ready(function(){
                $(".flip").click(function(){
                    $(".panel").slideUp(300);
                });
            });
        </script>    
    </body>
</html>

Copy after login

Key points (Tips):

1. Selection of click event button

In this broken code, it is ".flip"

2. Node selection

In this code it is ".panel"

Post another piece of code

The code is as follows:

<script type="text/javascript">
            $(document).ready(function(){
                $(".flip").click(function(){
                    $(".panel").slideToggle(300);
                });
            });
        </script>

Copy after login

.slideToggle event

Execute this sliding effect and display both Up and Down effects

The above content is a detailed explanation of slideUp and slideDown in jQuery. I hope you will like it.

The above is the detailed content of Click events of slideUp and slideDown in jQuery. For more information, please follow other related articles on the PHP Chinese website!