Menu arborescent
importance: 5
Créez une arborescence qui affiche / masque les enfants des nœuds au clic:
Conditions:
- Un seul gestionnaire d’événements (utiliser la délégation d’événement)
- Un clic en dehors du titre du nœud (sur un espace vide) ne devrait rien faire.
La solution comporte deux parties.
- Enveloppez chaque titre de nœud d’arbre dans
<span>. Ensuite, nous pouvons ajouter du CSS sur:hoveret gérer les clics exactement sur le texte, car la largeur de<span>est exactement la largeur du texte (contrairement à sans elle). - Définissez un gestionnaire sur le nœud racine
treeet gérez les clics sur ces<span>titres.