มองหาการใช้งานต้นไม้จำนวนมากบนอินเทอร์เน็ตฉันมักจะรู้สึกว่ามันไม่น่าพอใจ ไม่ว่าคุณจะต้องอ้างอิงไฟล์ภายนอก JS เพื่อใช้ปลั๊กอินหรือรหัสมากเกินไปทำให้คนเวียนหัว ในความเป็นจริงฉันแค่ต้องการใช้ต้นไม้ที่มีรหัสที่กระชับและตรรกะที่ไม่ซับซ้อน ฉันไม่ต้องการพูดมากและไปที่รหัส:
1. ก่อนเขียนสไตล์ CSS ส่วนหัวที่ต้องเขียนจะแสดงผลก่อน
การคัดลอกรหัสมีดังนี้:
<style>
.ps {margin-left: 10px; display: none;}
.f {
พื้นหลัง: URL ("add.gif") ไม่มีการทำซ้ำ Scroll -4px -21px;
เคอร์เซอร์: ตัวชี้;
ความสูง: 35px;
ความสูงของสาย: 37px;
Padding-Left: 20px;
-
</style>
2. เพิ่มเนื้อหาเฉพาะของต้นไม้ลงในร่างกายหลักของหน้า เนื้อหานี้ยังสามารถแสดงแบบไดนามิกได้ (จอแสดงผลแบบไดนามิกนั้นง่ายต่อการใช้งานตราบใดที่มันขึ้นอยู่กับกฎดังนั้นจึงไม่จำเป็นต้องพูดมันยิ้ม)
การคัดลอกรหัสมีดังนี้:
<div id = "sgc1"> การปรับเปลี่ยนรหัสผ่าน </div>
<div id = "sgc2"> การเลือกผลิตภัณฑ์ </div>
<div id = "sgc3" onclick = "w ('gc3')"> การตั้งค่าการจำแนกประเภท </div>
<div id = "gc3" style = "display: none">
<div id = "sfgc91" onclick = "k ('fgc91')"> ต้องดู </div>
<div id = "fgc91">
<div> ตั้งค่าผลิตภัณฑ์ MustSee </div>
</div>
<div id = "sfgc93" onclick = "k ('fgc93')"> Spotlight </div>
<div id = "fgc93">
<div> ตั้งค่าผลิตภัณฑ์ Spotlight </div>
</div>
<div id = "sfgc94" onclick = "k ('fgc94')"> รายวันพิเศษ </div>
<div id = "fgc94">
<div> ตั้งค่าผลิตภัณฑ์ dailyspecials </div>
</div>
<div id = "sfgc95" onclick = "k ('fgc95')"> hotcategory </div>
<div id = "fgc95">
<div> ตั้งค่าการจำแนกประเภท HotCategory </div>
<div> ตั้งค่าผลิตภัณฑ์ Hotcategory </div>
</div>
<div id = "sfgc96" onclick = "k ('fgc96')"> ตัวเลือกร้อนและเย็น </div>
<div id = "fgc96">
<div> ตั้งค่าผลิตภัณฑ์ Hot & Cool Picks </div>
</div>
<div id = "sfgc97" onclick = "k ('fgc97')"> filethcategorie </div>
<div id = "fgc97">
<div> ตั้งค่า filethcategories </div>
<div> ตั้งค่า filethcategories </div>
</div>
<div id = "sfgc98" onclick = "k ('fgc98')"> คุณอาจชอบ… </div>
<div id = "fgc98">
<div> ตั้งค่าคุณอาจชอบ ... หมวดหมู่ </div>
<div> ตั้งค่าคุณอาจชอบ ... ผลิตภัณฑ์ </div>
</div>
</div>
<div id = "sgc4" onclick = "w ('gc4')"> การตั้งค่าระบบ </div>
<div id = "gc4" style = "display: none">
<div> การจัดการผู้ใช้ </div>
</div>
3. ไฮไลท์อยู่ที่นี่ให้ความสนใจกับรองเท้าเดียวกันแล้วใช้การควบคุมต้นไม้ของ JS
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น w (vd) {
var ob = document.getElementById (vd);
if (ob.style.display == "block" || ob.style.display == "") {
ob.style.display = "ไม่มี";
var ob2 = document.getElementById ('s' + vd);
ob2.style.background = "url (add.gif) -4px -21px ไม่ทำซ้ำ";
-
อื่น {
ob.style.display = "block";
var ob2 = document.getElementById ('s' + vd);
ob2.style.background = "url (add.gif) -4px 4px no -repeat;";
-
-
ฟังก์ชั่น k (vd) {
var ob = document.getElementById (vd);
if (ob.style.display == "block") {
ob.style.display = "ไม่มี";
var ob2 = document.getElementById ('s' + vd);
ob2.style.background = "url (add.gif) -4px -21px ไม่ทำซ้ำ";
-
อื่น {
ob.style.display = "block";
var ob2 = document.getElementById ('s' + vd);
ob2.style.background = "url (add.gif) -4px 4px no -repeat;";
-
-
4. ไดอะแกรมตัวอย่างที่กำลังทำงานมีดังนี้: