Mencari banyak implementasi pohon di internet, saya selalu merasa itu tidak memuaskan. Entah Anda perlu merujuk file eksternal JS untuk menggunakan plug-in, atau terlalu banyak kode membuat orang pusing. Bahkan, saya hanya ingin menerapkan pohon dengan kode ringkas dan logika tanpa kompleks. Saya tidak ingin banyak bicara dan hanya pergi ke kode:
1. Pertama tulis gaya CSS, header yang harus ditulis pertama kali diterjemahkan
Salinan kode adalah sebagai berikut:
<tyle>
.ps {margin-left: 10px; display: none;}
.F {
Latar belakang: url ("add.gif") no -repeat scroll -4px -21px;
kursor: pointer;
Tinggi: 35px;
Line-Height: 37px;
Padding-left: 20px;
}
</tyle>
2. Tambahkan konten spesifik pohon ke badan utama halaman. Konten ini juga dapat ditampilkan secara dinamis (tampilan dinamis mudah diimplementasikan selama ini didasarkan pada aturan, jadi tidak perlu mengatakannya. Smile)
Salinan kode adalah sebagai berikut:
<Div ID = "SGC1"> Modifikasi Kata Sandi </div>
<Div ID = "SGC2"> Pemilihan Produk </Div>
<Div ID = "SGC3" OnClick = "W ('GC3')"> Pengaturan Klasifikasi </div>
<Div id = "gc3" style = "display: none">
<Div id = "sfgc91" onclick = "k ('fgc91')"> harus melihat </div>
<Div id = "fgc91">
<div> Tetapkan produk mustsee </div>
</div>
<div id = "sfgc93" onclick = "k ('fgc93')"> Spotlight </div>
<Div id = "fgc93">
<div> Tetapkan Produk Spotlight </Div>
</div>
<Div ID = "SFGC94" OnClick = "K ('FGC94')"> Spesial Harian </Div>
<Div id = "fgc94">
<div> Set Produk Dailyspecials </Div>
</div>
<div id = "sfgc95" onclick = "k ('fgc95')"> hotcategory </div>
<Div id = "fgc95">
<div> Tetapkan Klasifikasi Kategori Hotcatter </div>
<div> Tetapkan Produk Hotcategory </Div>
</div>
<Div ID = "SFGC96" OnClick = "K ('FGC96')"> Pilihan Panas & Keren </div>
<Div id = "fgc96">
<div> Set Hot & Cool Picks Products </div>
</div>
<Div id = "sfgc97" onclick = "k ('fgc97')"> Fiturcategorie </div>
<Div id = "fgc97">
<SEV> Set FiturCategories </Div>
<SEV> Set FiturCategories </Div>
</div>
<div id = "sfgc98" onclick = "k ('fgc98')"> Anda mungkin juga suka ... </div>
<Div id = "fgc98">
<div> Set Anda mungkin juga suka ... Kategori </Div>
<div> Set Anda mungkin juga suka ... Produk </Div>
</div>
</div>
<Div ID = "SGC4" OnClick = "W ('GC4')"> Pengaturan Sistem </div>
<Div id = "gc4" style = "display: none">
<div> Manajemen Pengguna </Div>
</div>
3. Sorotannya ada di sini, perhatikan sepatu yang sama, dan kemudian mengimplementasikan kontrol pohon JS
Salinan kode adalah sebagai berikut:
fungsi w (vd) {
var ob = document.geteLementById (vd);
if (ob.style.display == "block" || ob.style.display == "") {
ob.style.display = "tidak ada";
var ob2 = document.geteLementById ('s' + vd);
ob2.style.background = "url (add.gif) -4px -21px no -repeat";
}
kalau tidak {
ob.style.display = "block";
var ob2 = document.geteLementById ('s' + vd);
ob2.style.background = "url (add.gif) -4px 4px no -repeat;";
}
}
fungsi k (vd) {
var ob = document.geteLementById (vd);
if (ob.style.display == "block") {
ob.style.display = "tidak ada";
var ob2 = document.geteLementById ('s' + vd);
ob2.style.background = "url (add.gif) -4px -21px no -repeat";
}
kalau tidak {
ob.style.display = "block";
var ob2 = document.geteLementById ('s' + vd);
ob2.style.background = "url (add.gif) -4px 4px no -repeat;";
}
}
4. Diagram contoh berjalan adalah sebagai berikut: