Menù ad albero
importanza: 5
Create una struttura ad albero che al click, mostra o nasconde i nodi figli:
Requisiti:
- Un solo gestore di eventi (usare delegation)
- Un click fuori dal nodo del titolo (su uno spazio vuoto) non dovrebbe generare alcuna operazione.
La soluzione viene divisa in due parti distinte.
- Inglobare il nodo che rappresenta il titolo dentro uno
<span>
e su questo elemento modificare gli i CSS per l’:hover
; la gestione dei click con lo<span>
è agevole perché questo occupa esattamente la larghezza del testo. - Impostare un gestore sul nodo radice dell’
albero
e gestire i click su questi titoli<span>
.