назад до уроку

Деревоподібне меню

важливість: 5

Створіть дерево, яке показує/приховує дочірні вузли при кліці:

Вимоги:

  • Тільки один обробник подій (використовуйте делегування)
  • Клік поза заголовком вузла (на порожньому місці) не має нічого робити.

Відкрити пісочницю для завдання.

Рішення складається з двох частин.

  1. Обертаємо кожен заголовок дерева в <span>. Тоді ми можемо додати їм CSS стилі на :hover і обробляти клік саме по тексту, тому що ширина <span> повністю співпадає з шириною тексту.
  2. Встановлюємо обробник на кореневий вузол tree та обробляємо кліки на елементах <span>, які містять заголовки.

Відкрити рішення в пісочниці.