ต้นไม้ในการออกแบบเว็บคืออะไร? เพียงแค่คลิกที่ลิงค์ขยายไดเรกทอรีที่ต่ำกว่าจากนั้นคลิกที่มันเพื่อเข้าร่วม นี่คือต้นไม้ที่ง่ายที่สุด จะใช้งานได้อย่างไร? มันก็ง่ายมาก มีการแสดงคุณสมบัติใน CSS สิ่งนี้สามารถควบคุมความเป็นจริงของเนื้อหาได้ แต่ก็ยังไม่แสดง จากนั้นคุณสามารถควบคุมคุณสมบัติของ CSS ผ่าน JS. ดูรหัสต่อไปนี้:
<div> ไดเรกทอรีด้านบน </div>
<div id = menulist>
<div> เมนู 1 </div>
<div> เมนู 2 </div>
<div> เมนู 3 </div>
</div>
นี่ถือเป็นต้นแบบของต้นไม้ แน่นอนสถานะเริ่มต้นเพิ่มแอตทริบิวต์การแสดงผลของ CSS แอตทริบิวต์การแสดงผลที่ใช้กันมากที่สุดคือไม่มีและแอตทริบิวต์บล็อก
ไม่มีการแสดงในขณะที่บล็อกจะปรากฏขึ้นเหมือนองค์ประกอบประเภทบล็อก จากนั้นดูรหัส
<div> ไดเรกทอรีด้านบน </div>
<div id = menulist style = display: none>
<div> เมนู 1 </div>
<div> เมนู 2 </div>
<div> เมนู 3 </div>
</div>
ด้วยวิธีนี้ถ้าคุณเรียกใช้หน้าคุณจะแสดงไดเรกทอรีระดับบนสุดเท่านั้น หากคุณควบคุมคุณต้องเพิ่มรหัส JS
1. รับ Menulist ก่อน
var menulist = document.getElementById (menulist);
2. หรือคุณสามารถควบคุมคุณสมบัติ CSS ได้หลังจากวัตถุนี้
menulist.style.display = block;
เพิ่มคำพิพากษา
if (menulist.style.display = ไม่มี)
menulist.style.display = block;
อื่น
menulist.style.display = ไม่มี;
ด้วยวิธีนี้ต้นไม้ต้นฉบับมากที่สุดถูกสร้างขึ้นรหัสสุดท้าย
<script>
ฟังก์ชั่น Showmenu ()
-
var menulist = document.getElementById (menulist);
if (menulist.style.display == ไม่มี)
menulist.style.display = block;
อื่น
menulist.style.display = ไม่มี;
-
</script>
<div on
Click = ShowMenu ();> Top Directory </div>
<div id = menulist style = display: none>
<div> เมนู 1 </div>
<div> เมนู 2 </div>
<div> เมนู 3 </div>
</div>
เป็นเวลานานที่ฉันเคยสร้างไดเรกทอรีแอตทริบิวต์ตามวิธีนี้ ไม่ว่าจะมีการทดลองและทดสอบไดเรกทอรีเพียงใดวิธีการนี้ได้รับการลองและทดสอบ ภาพหน้าจอต่อไปนี้เป็นผลการดำเนินงานของไดเรกทอรีต้นไม้ที่ค่อนข้างซับซ้อนที่ฉันทำภายใต้ IE:
สิ่งที่น่ากลัวเกิดขึ้นภายใต้โครเมี่ยมและมันก็ยุ่งเหยิงอย่างสมบูรณ์ หลังจากการดึงข้อมูลบางอย่างในที่สุดฉันก็พบเหตุผล นอกจากบล็อกและไม่มีการแสดงผลมีคุณลักษณะอื่น ๆ อีกมากมาย บล็อกจะแสดงในบล็อก ฉันถูกวางไว้บนโต๊ะ พระเจ้ารู้ว่าโต๊ะและบล็อกมีความเกลียดชังอย่างลึกซึ้งหรือไม่ Microsoft คิดว่ามันไม่สนใจความเกลียดชังของพวกเขาอย่างชาญฉลาดในขณะที่ Chrome ยังคงเชื่อฟังมาตรฐานอย่างตรงไปตรงมา Firefox เหมือนกันดังนั้นยังมีปัญหาในคำอธิบายของพวกเขา วิธีแก้ปัญหานี้:
จอแสดงผลยังมีเซลล์ตารางคุณสมบัติซึ่งหมายถึงการแสดงเนื้อหาในรูปแบบของตาราง นี่เป็นไปตามการใช้ตารางสำหรับเค้าโครงของฉัน ต่อไปนี้เป็นการแสดงผลที่เข้ากันได้ของเบราว์เซอร์ทั้งสาม:
IE6
Chrome2
Firefox3.5