search

Home >Web Front-end >JS Tutorial >Click events of slideUp and slideDown in jQuery

Click events of slideUp and slideDown in jQuery

巴扎黑
巴扎黑Original
2017-06-29 11:22:411610browse

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>

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>

.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!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Summary of usage of slideUp(), slideDown(), hide(), show() in jQueryNext article：Summary of usage of slideUp(), slideDown(), hide(), show() in jQuery

Related articles

See more