recherche

Maison >interface Web >js tutoriel >Cliquez sur les événements de slideUp et slideDown dans jQuery

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

巴扎黑
巴扎黑original
2017-06-29 11:22:411607parcourir

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>

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>

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

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Résumé de l'utilisation de slideUp(), slideDown(), hide(), show() dans jQueryArticle suivant：Résumé de l'utilisation de slideUp(), slideDown(), hide(), show() dans jQuery

Articles Liés

Voir plus