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.
Solusi terbagi atas 2 bagian.
- Bungkus setiap node pada pohon kedalam
<span>. Kemudian kita bisa menambahkan:hoverdengan CSS-style dan menanggani klik tepat pada teks, karena lebar<span>sama dengan lebar tulisan (lebar tidak sama jika tidak menggunakan<span>); - Atur sebuah penangan (handler) ke
treeakar dari node dan tanggani setiap klik pada judul<span>.