تقدم هذه المقالة استخدام وحدة BootStrap المنسدلة المنسدلة للرجوع إليها. المحتوى المحدد كما يلي
1. تحليل رمز المصدر:
منسدلة SSCSS: وحدة المربع المنسدلة
JavaScripts/Bootstrap/Retropdown.js: تنفيذ استجابة مربع منسدلة
2. وظائف ومبادئ:
سحب علامة التبويب "سحب لأسفل" ، لا يمكن تحقيق وظيفة عرض العناصر المحددة بشكل افتراضي.
مبدأ:
1. استخدم فئة القائمة المنسدلة كنقطة مرساة ، ثم اتركي تسرد الأطفال المنسدلة في وضعه على الإطلاق. تحتاج أيضًا إلى إضافة نقطة نقرة لأن إعداد البيانات toggle = "المنسدلة" لجعل الجمعية.
2. بحاجة إلى دعم من المكونات الإضافية JS
3. تحليل رمز المصدر:
1. Caret: قم بتنفيذ المثلث الهبوطي ، باستخدام الحدود للتنفيذ
1.1. لون الحدود هو لون الخط افتراضيًا
1.2. تنفيذ المثلثات: يجب أن يكون للحدود عرض ، ثم يجب أن يكون للجوانب المجاورة عرض ، ولكن اللون شفاف ؛ أخيرًا ، يجب أن يكون العنصر عنصرًا كتلة في الصف لجعل ارتفاعه وعرضه 0.
1.3. الرمز كما يلي
نسخة الكود هي كما يلي: <span style = "الحدود اليسار: 4 بكسل الصلب ؛ القمة الحدودية: 4 بكسل شفاف صلبة ؛ القاع الحدودي: 4px شفافة صلبة ؛ الارتفاع: 0px ؛ العرض: 0px ؛ ارتفاع الخط: عادي ؛ العرض: عرض مضمّن ؛"> </span>
2. إن نوع الاستماع لحدث النقرات مرتبط بالوثيقة ، ونوع الاستماع هو بيانات البيانات = "القائمة المنسدلة".
3. يتم استخدام وظيفة البرنامج المساعد المكتوب بواسطة المكون الإضافي JS ومشارك الفئة للاتصال بالمكون الإضافي باستخدام طريقة JS ؛
4. وضع البيانات-* يستدعي المكون الإضافي ، والذي يتم استخدامه لحقن الأحداث في المستند ، كما يلي الرمز:
$ (document) .on ('click.bs.dropdown.data-api' ، clearmenus) .on ('click.bs.dropdown.data-api' ، '.dropdown form' ، function (e) { REPDOWN.Prototype.toggle) .on ('keydown.bs.dropdown.data-api' ، Toggle ، Retpown.prototype.keydown) .on ('keydown.bs.dropdown.data-api' ، '.الكود يستدعي مباشرة الطريقة المحددة بواسطة القائمة المنسدلة. يكمن التصميم الرائع هنا في إطار العمل الإضافي ، ودعوة وضع البيانات* ودعوة وضع المكونات الإضافية JS ، في حين أن هذين وضعي الاتصال يستخدمان نفس الرمز.
5. إذا قمت بتسميتها باستخدام المكون الإضافي JS ، فيجب عليك الاتصال بالطرق الأساسية بنفسك. سيتم ربط حدث التبديل فقط عند إنشاء مثيل.
VAR REPDOWN = function (element) {$ (element) .on ('click.bs.dropdown' ، this.toggle)}6. ClearMenu: تم مسح عنصر البيانات فقط = "القائمة المنسدلة"
7. القائمة المنسدلة: تستخدم لنقل معالجة أحداث النقر
8. KeyDown: عندما يحصل زر القائمة المنسدلة على التركيز ، اضغط على مفتاح التوسع والضغط على المفتاح العلوي للانكماش.
9. تهدف البيانات و Herf = "#id": لتحقيق النقر ، قم بتوسيع القائمة المنسدلة المحددة. الافتراضي هو توسيع العقد الشقيق خلف الزر:
<ul> <li> <a> فهرس </a> </li> <li> <a> <a> zhenglu </a> </li> <li> <a data-toggle = "sropdow
10. قم بتنفيذ القائمة الفرعية المنبثقة واستخدم القاع: 100 ٪ (تحديد موقع القائمة الفرعية المنبثقة السفلية) لتنفيذها
11. أمثلة التطبيق
<div id = "sropdown"> <a id = "sropdown-btn" data-arget = "#tropdown"> number </a> <ul> <a> <a> 3343 </a> </li> <a> <a> 555 </a> </li>
إذا كنت لا تزال ترغب في التعلم بعمق ، فيمكنك النقر هنا للتعلم وإرفاق موضوعين مثيرين لك: Bootstrap التعلم التعليمي التعليمي التعليمي العملي
ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون من المفيد للجميع تعلم برمجة JavaScript.