Tutorial membuat direktori pokok dengan CSS_CSS/HTML

Artikel ini memperkenalkan secara terperinci cara menggunakan CSS untuk mengawal atribut "menunjukkan" dan "menyembunyikan" objek dengan mudah dan mencipta direktori pepohon Gunakan CSS untuk mencipta direktori pepohon seperti itu kod agak mudah, jadi saya menulisnya dan berkongsi dengan netizen supaya mereka boleh membuatnya apabila diperlukan.

Kebanyakan majalah elektronik Suoyi menggunakan direktori pokok Apabila tetikus mengklik pada direktori utama, subdirektori dikembangkan apabila direktori utama diklik semula, subdirektori ditutup. Ia kelihatan ringkas, meriah dan bersahaja.

Terdapat banyak cara untuk mencipta direktori seperti pokok ini Baru-baru ini, saya mula-mula melihat contoh berikut: apabila anda mengklik pada direktori utama dengan tetikus, subdirektori yang sepadan akan ditarik ke bawah. apabila anda mengklik sekali lagi, ia akan kembali kepada keadaan asalnya, kesannya adalah sama seperti kesan katalog dalam majalah elektronik Soyi.

Kaedah pengeluaran:
Saya mula-mula menyalin kod yang menghasilkan kesan ini seperti berikut, dan kemudian menggabungkan kod untuk menerangkan kaedah pengeluaran:
〈div id="main1" style= "color:blue " onclick="document.all.child1.style.display=(document.all.child1.style.display ==''none'')?'''':''none''" 〉
+ Direktori Utama 1〈/div〉
〈div id="child1" style="display:none"〉
〈a href="#"〉- Subdirektori 1〈/a〉 〈br〉
〈 a href="#"〉- Subdirektori 2〈/a〉 〈br〉
〈a href="#"〉- Subdirektori 3〈/a〉 〈br〉
〈a href="# " 〉- Subdirektori 4〈/a〉
〈/div〉
〈div id="main2" style="color:blue" onclick="document.all.child2.style.display=(document.all .child2.style.display ==''none'')?'''':''none''" 〉
+ Direktori utama 2 〈/div〉
〈div id="child2" style= "display:none"〉
〈a href="#"〉- Subdirektori 1〈/a〉 〈br〉
〈a href="#"〉- Subdirektori 2〈/a〉 〈br〉
〈a href="#"〉- Subdirektori 3〈/a〉
〈/div〉
Nota: " " mewakili ruang aksara
1. Pertama tentukan dua DIV, satu dengan Untuk direktori utama , namakannya: main1; yang satu lagi untuk subdirektori yang sepadan, namakannya: child1. 2. Tulis "+ Direktori Utama 1" dalam DIV main1, dan muatkan acara klik tetikus padanya: onclick dan program Javascript kecil: document.all.child1.style.display= (document.all. child1.style. paparan ==''tiada'')?'''':''tiada''. Fungsi program ini ialah apabila tetikus mengklik pada DIV main1 (iaitu, pada "+ Direktori Utama 1"), jika DIV child1 disembunyikan, biarkan ia dipaparkan, jika ia dipaparkan; tersembunyi.
3. Tulis subdirektori pada DIV anak1 dan tetapkannya sebagai hiperpautan Dalam contoh di atas, saya menetapkan pautan kosong Dalam pengeluaran sebenar, saya menukarnya kepada pautan sebenar supaya ia menghala ke pautan. Sasaran. Tambahkan CSS: style="display:none" pada takrifan DIV bagi child1 Tujuannya adalah untuk menjadikan subdirektori tersembunyi pada permulaan.
Untuk membuat direktori lain, hanya ulangi tiga langkah di atas. Tekan F12 untuk melihat kesannya. Kaedah ini terutamanya menggunakan atribut paparan CSS: paparan Salah satu cirinya ialah apabila objek disembunyikan, ruang halaman yang diduduki oleh objek akan secara automatik diserahkan. Kami tahu bahawa CSS mempunyai atribut lain: keterlihatan juga mempunyai fungsi untuk menunjukkan dan menyembunyikan objek, tetapi ia tidak boleh digunakan untuk mencipta direktori seperti pepohon di atas. Kerana selepas Keterlihatan menyembunyikan objek, ruang yang diduduki oleh objek tidak dikeluarkan Iaitu, apabila subdirektori disembunyikan, lokasi subdirektori hanya kosong dan kedudukan tidak dikeluarkan, jadi direktori utama lain tidak boleh dialihkan lebih dekat. Jadi ia hanya boleh digunakan di mana kedudukan elemen halaman perlu diperbaiki.