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

Ми хочемо зробити цей проєкт з відкритим кодом доступним для людей у всьому світі.

Допоможіть перекласти цей підручник вашою мовою!

КупитиEPUB/PDF
Навчальна карта
назад до уроку

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

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

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

Вимоги:

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

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

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

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

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