Cliquez sur les événements de slideUp et slideDown dans jQuery-js tutoriel-php.cn

Cliquez sur les événements de slideUp et slideDown dans jQuery

巴扎黑

Libérer： 2017-06-29 11:22:41

original

1588 Les gens l'ont consulté

Cet article présente principalement les informations pertinentes sur les événements de clic de slideUp et slideDown dans jQuery. Les amis qui en ont besoin peuvent se référer à

Publiez d'abord le code, puis parlez-en. événements détaillés

Le code est le suivant :

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

Copier après la connexion

Points clés (Conseils) :

1 La sélection du bouton événement clic

Dans. ce code cassé est ".flip"

2. Sélection de nœud

Dans ce code, c'est ".panel"

Ajoutez un autre morceau de code

Le code est le suivant :

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

Copier après la connexion

Événement .slideToggle

Cet effet de glissement est effectué et les effets Up et Down sont affichés

Le contenu ci-dessus est un détail explication de slideUp et slideDown dans jQuery. J'espère que tout le monde pourra l'aimer.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!