torna alle lezioni

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.

Apri una sandbox per l'esercizio.

La soluzione viene divisa in due parti distinte.

  1. 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.
  2. Impostare un gestore sul nodo radice dell’albero e gestire i click su questi titoli <span>.

Apri la soluzione in una sandbox.