Деревоподібне меню
важливість: 5
Створіть дерево, яке показує/приховує дочірні вузли при кліці:
Вимоги:
- Тільки один обробник подій (використовуйте делегування)
- Клік поза заголовком вузла (на порожньому місці) не має нічого робити.
Рішення складається з двох частин.
- Обертаємо кожен заголовок дерева в
<span>. Тоді ми можемо додати їм CSS стилі на:hoverі обробляти клік саме по тексту, тому що ширина<span>повністю співпадає з шириною тексту. - Встановлюємо обробник на кореневий вузол
treeта обробляємо кліки на елементах<span>, які містять заголовки.