Maison > Article > interface Web > Explication détaillée de l'utilisation des panneaux pliables en JS

Explication détaillée de l'utilisation des panneaux pliables en JS

php中世界最好的语言original: 2018-03-26 09:15:292764parcourir

Cette fois, je vais vous apporter une explication détaillée de l'utilisation des panneaux pliables JS. Quelles sont les précautions lors de l'utilisation des panneaux pliables JS. Voici des cas pratiques, jetons un coup d'œil.

Par exemple

<html>
    <div id="accord">
        <h3>Part1</h3>
        <p> I am part 1</p>
        <h3>Part2</h3>
        <p>I am part 2</p>
        <h3>part 3</h3>
        <p>I am part 3</p>
    </div>
 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
 </script>
 <script>$("#accord").on(&#39;click&#39;,&#39;h3&#39;,function(e){    //绑定单击事件
    $(this).next().slideToggle();    //深入理解next选择器})
 </script>
</html>

Analyse

La clé est de comprendre la méthode suivante

et la méthode slideToggle

cela fait référence à L'élément actuel h3

next sélectionne les éléments adjacents du même niveau, ce qui ne signifie pas que les étiquettes sont les mêmes. Par exemple, dans cet exemple, p et h3 sont du même niveau

Ce qui précède est une opération en chaîne

où

$(this).next().slideToggle();

peut également s'écrire

$(this)
    .next()
    .slideToggle();

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez faire attention au site Web chinois php et aux autres articles liés !

Lecture recommandée :

Comment trier le tableau en fonction de la taille de la valeur clé

Laravel implémente un mode multi-utilisateur système d'authentification

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：JS implémente la méthode du minuteur d'animationArticle suivant：JS implémente la méthode du minuteur d'animation

Articles Liés

Voir plus