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