Apa itu pohon dalam desain web? Sederhananya, klik tautan, perluas direktori yang lebih rendah, lalu klik untuk bergabung. Ini adalah pohon paling sederhana. Bagaimana cara mengimplementasikannya? Ini juga sangat sederhana. Ada tampilan properti di CSS. Ini dapat mengontrol realitas konten tetapi masih tidak ditampilkan. Kemudian Anda dapat mengontrol sifat -sifat CSS melalui JS., Lihat kode berikut:
<div> Direktori Top </Div>
<Div ID = Menulist>
<div> menu 1 </div>
<div> menu 2 </div>
<div> menu 3 </div>
</div>
Ini dianggap sebagai prototipe pohon. Tentu saja, keadaan awal menambahkan atribut tampilan CSS ke dalamnya. Atribut tampilan yang paling umum digunakan adalah tidak ada dan blok atribut.
Tidak ada yang tidak ditampilkan, sementara blok ditampilkan seperti elemen tipe blok. Kemudian lihat kodenya
<div> Direktori Top </Div>
<Div ID = gaya menulist = display: none>
<div> menu 1 </div>
<div> menu 2 </div>
<div> menu 3 </div>
</div>
Dengan cara ini, jika Anda menjalankan halaman, Anda hanya akan menampilkan direktori tingkat atas. Jika Anda mengendalikannya, Anda perlu menambahkan kode JS.
1. Dapatkan menulist dulu
var menulist = document.geteLementById (menulist);
2. Atau Anda dapat mengontrol sifat CSS -nya setelah objek ini
menulist.style.display = block;
Tambahkan penilaian
if (menulist.style.display = tidak ada)
menulist.style.display = block;
kalau tidak
menulist.style.display = tidak ada;
Dengan cara ini, pohon yang paling asli dihasilkan, kode akhir
<script>
fungsi showmenu ()
{
var menulist = document.geteLementById (menulist);
if (menulist.style.display == tidak ada)
menulist.style.display = block;
kalau tidak
menulist.style.display = tidak ada;
}
</script>
<Div on
klik = showMenu ();> Top Directory </Div>
<Div ID = gaya menulist = display: none>
<div> menu 1 </div>
<div> menu 2 </div>
<div> menu 3 </div>
</div>
Untuk waktu yang lama, saya biasa membuat direktori atribut sesuai dengan metode ini. Tidak peduli seberapa rumit direktori yang harus dibuat, metode ini telah dicoba dan diuji. Tangkapan layar berikut adalah efek operasi dari direktori pohon yang relatif kompleks yang saya buat di bawah IE:
Hal yang mengerikan terjadi di bawah Chrome dan itu benar -benar kacau. Setelah beberapa pengambilan informasi, saya akhirnya menemukan alasannya. Selain memblokir dan tidak ada, tampilan memiliki banyak atribut lainnya. Blok ditampilkan dalam blok. Saya diletakkan di atasnya di meja. Tuhan tahu apakah meja dan blok memiliki kebencian yang mendalam. Microsoft mengira itu dengan cerdik mengabaikan kebencian mereka, sementara Chrome masih mematuhi standar dengan sangat jujur. Firefox sama, jadi masih ada masalah dalam penjelasannya. Bagaimana menyelesaikan masalah ini:
Tampilan juga memiliki sel tabel properti, yang berarti memberikan konten dalam bentuk tabel. Ini persis sejalan dengan penggunaan meja saya untuk tata letak. Berikut ini adalah rendering yang kompatibel dari tiga browser:
IE6
chrome2
Firefox3.5