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('click','h3',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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
