أبحث عن الكثير من تطبيقات الأشجار على الإنترنت ، أشعر دائمًا أنها ليست مرضية. إما أن تحتاج إلى الرجوع إلى ملفات JS الخارجية لاستخدام المكونات الإضافية ، أو أن الكثير من التعليمات البرمجية تجعل الأشخاص بالدوار. في الواقع ، أريد فقط تنفيذ شجرة مع رمز موجز ومنطق غير مجهول. لا أريد أن أقول الكثير وأذهب إلى الكود:
1. أولاً اكتب نمط CSS ، يتم تقديم الرأس الذي يجب كتابته أولاً
نسخة الكود كما يلي:
<style>
.PS {margin-left: 10px ؛ عرض: لا شيء ؛}
.f {
الخلفية: url ("add.gif") no -repeat scroll -4px -21px ؛
المؤشر: مؤشر.
الارتفاع: 35 بكسل ؛
Line-Leight: 37px ؛
حشو اليسار: 20 بكسل ؛
}
</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 Products </iv>
</div>
<div id = "sfgc93" onClick = "k ('fgc93')"> spotlight </div>
<div id = "fgc93">
<Div> قم بتعيين منتجات الضوء </div>
</div>
<div id = "sfgc94" onClick = "k ('fgc94')"> العروض الخاصة اليومية </div>
<div id = "fgc94">
<div> تعيين منتجات DailySpecials </div>
</div>
<div id = "sfgc95" onClick = "k ('fgc95')"> HotCategory </viv>
<div id = "fgc95">
<div> تعيين HotCategory Classification </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')"> superuredCategorie </viv>
<div id = "fgc97">
<div> مجموعة المميزات المميزة </div>
<div> مجموعة المميزات المميزة </div>
</div>
<div id = "sfgc98" onClick = "k ('fgc98')"> قد تعجبك أيضًا ... </div>
<div id = "fgc98">
<div> set قد تحب ... الفئة </div>
<div> set قد تحب ... المنتج </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 = "none" ؛
var ob2 = document.getElementById ('s' + vd) ؛
ob2.style.background = "url (add.gif) -4px -21px no -repeat" ؛
}
آخر {
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 = "none" ؛
var ob2 = document.getElementById ('s' + vd) ؛
ob2.style.background = "url (add.gif) -4px -21px no -repeat" ؛
}
آخر {
ob.style.display = "block" ؛
var ob2 = document.getElementById ('s' + vd) ؛
ob2.style.background = "url (add.gif) -4px 4px no -repeat ؛" ؛
}
}
4. مخطط مثال الجري كما يلي: