kembali ke pelajaran

Menu pohon (_tree menu_)

pentingnya: 5

Buat sebuah pohon yang akan menampilkan/menyembunyikan elemen bawahan pada saat di klik:

Syarat:

  • Hanya satu penangan peristiwa (event handler) gunakan delegasi peristiwa.
  • Klik di luar judul node (pada ruang kosong) tidak boleh melakukan apa-apa.

Buka sandbox untuk tugas tersebut.

Solusi terbagi atas 2 bagian.

  1. Bungkus setiap node pada pohon kedalam <span>. Kemudian kita bisa menambahkan :hover dengan CSS-style dan menanggani klik tepat pada teks, karena lebar <span> sama dengan lebar tulisan (lebar tidak sama jika tidak menggunakan <span>);
  2. Atur sebuah penangan (handler) ke tree akar dari node dan tanggani setiap klik pada judul <span>.

Buka solusi di kotak pasir.