CATALOGUE Code & Data Formation Ajax/jQuery Apprendre Ajax / JQuery Création d'une Liste Déroulante avec jQuery

Création d'une Liste Déroulante avec jQuery

Liste déroulante
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre Ajax / JQuery
Revoir le teaser Je m'abonne
5,0
Transcription
59,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
5,0
59,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Mise en application pratique

Objectifs

Les objectifs de cette vidéo incluent :
- Comprendre comment manipuler le DOM avec jQuery.
- Apprendre à masquer et afficher des éléments HTML.
- Créer des transitions fluides pour améliorer l'expérience utilisateur.

Résumé

Découvrez comment utiliser jQuery pour créer une liste déroulante dynamique qui masque et affiche les sous-listes par clic.

Description

Dans cette leçon, nous allons apprendre à créer une liste déroulante en utilisant jQuery. Nous partirons d'une structure de liste HTML basique, composée d'éléments ul et li, et ajouterons des fonctionnalités interactives pour masquer et afficher les sous-listes.

Afin de rendre la liste interactive, nous initialiserons un script indépendant nommé liste.js. Tout d'abord, nous masquerons les sous-listes en utilisant la fonction hide. Ensuite, nous rendrons les titres de la liste cliquables en ajoutant un gestionnaire d'événements pour les liens (a) situés dans les premiers éléments de liste.

Le sélecteur this.next('ul') nous permettra de cibler les sous-listes adjacentes aux liens cliqués et d'appliquer la méthode slideToggle, ce qui déclenchera l'animation d'apparition ou de masquage des sous-listes. Cette approche permet de créer des interfaces utilisateur claires et intuitives.

Voir plus

Questions - réponses

Quel sélecteur est utilisé pour masquer les sous-listes au chargement de la page ?
Le sélecteur utilisé est $('#maliste > ul').hide().
Quelle fonction est appelée pour afficher ou masquer les sous-listes après le clic sur un titre ?
La fonction slideToggle() est utilisée pour afficher ou masquer les sous-listes après un clic.
Comment cible-t-on les liens contenus directement dans les premiers éléments de liste de maliste ?
Les liens sont ciblés avec le sélecteur $('#maliste > li > a').

Programme détaillé

1 commentaire
5,0
1 vote
5
4
3
2
1
zohor.souhila
Il y a 3 years
Commentaire
Excellente formation!