Explication détaillée de l'utilisation des panneaux pliables en JS-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-03-26 09:15:29

original

2731 Les gens l'ont consulté

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>

Copier après la connexion

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();

Copier après la connexion

peut également s'écrire

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

Copier après la connexion

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!