ما هي شجرة في تصميم الويب؟ ما عليك سوى وضع ، انقر فوق رابط ، وتوسيع الدليل السفلي ، ثم انقر فوقه للانضمام. هذه هي أبسط شجرة. كيف تنفذها؟ كما أنها بسيطة للغاية. هناك عرض خاصية في CSS. هذا يمكن أن يتحكم في واقع المحتوى لكنه لا يزال لا يتم عرضه. ثم يمكنك التحكم في خصائص CSS من خلال JS. ، راجع الكود التالي:
<Div> دليل أعلى </div>
<div id = menulist>
<viv> القائمة 1 </viv>
<viv> القائمة 2 </viv>
<viv> القائمة 3 </viv>
</div>
هذا يعتبر نموذجًا أوليًا للشجرة. بالطبع ، تضيف الحالة الأولية سمة عرض CSS إليها. سمات العرض الأكثر استخدامًا هي لا شيء وسمات حظر.
لا يتم عرض أي شيء ، بينما يتم عرض Block مثل عنصر نوع الكتلة. ثم انظر إلى الكود
<Div> دليل أعلى </div>
<div id = menulist style = display: none>
<viv> القائمة 1 </viv>
<viv> القائمة 2 </viv>
<viv> القائمة 3 </viv>
</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 == none)
menulist.style.display = block ؛
آخر
menulist.style.display = لا شيء ؛
}
</script>
<div on
انقر فوق = ShowMenu () ؛> Top Directory </iv>
<div id = menulist style = display: none>
<viv> القائمة 1 </viv>
<viv> القائمة 2 </viv>
<viv> القائمة 3 </viv>
</div>
لفترة طويلة ، اعتدت على عمل أدلة السمة وفقًا لهذه الطريقة. بغض النظر عن مدى تعقيد الدليل الذي سيتم إجراؤه ، فقد تمت تجربة هذه الطريقة واختبارها. لقطة الشاشة التالية هي تأثير تشغيل دليل الأشجار المعقد نسبيًا الذي قمت به بموجب IE:
حدث الشيء الرهيب تحت كروم وكان قد أفسد تماما. بعد بعض استرداد المعلومات ، وجدت أخيرًا السبب. بالإضافة إلى block وليس ، لا شيء ، يحتوي العرض على العديد من السمات الأخرى. يتم عرض الكتلة في كتل. لقد وضعت على طاولة. يعلم الله ما إذا كان الطاولة والكتل لهما كراهية عميقة. اعتقدت Microsoft أنها كانت تتجاهل بذكاء كراهيتهم ، في حين أن Chrome لا يزال يطيع المعايير بأمانة شديدة. Firefox هو نفسه ، لذلك لا تزال هناك مشاكل في تفسيراتها. كيفية حل هذه المشكلة:
يحتوي العرض أيضًا على خلايا جدول خاصية ، مما يعني تقديم المحتوى في شكل جدول. هذا بالضبط يتماشى مع استخدامي لجدول للتخطيط. فيما يلي عرض متوافق للمتصفحات الثلاثة:
IE6
Chrome2
Firefox3.5