يتم استخدام المكون المنسدلة في شريط التنقل في Bootstrap بشكل متكرر. تقدم هذه المقالة حدث امتداد المكون المنسدلة في Bootstrap. المحتوى المحدد كما يلي
كيف تنفذ هذا الحدث الذي تحوم؟ في الواقع ، من السهل إكمالها بناءً على حدث النقر للمكون المنسدلة. يمكن لأولئك الذين حريصون العثور على أنه عندما يظهر المربع المنسدلة ، سيكون لدى والديه سمة فئة مفتوحة. نحتاج فقط إلى إضافة أو حذف الفئة المفتوحة إلى الوالد عند الاستماع إلى حدث Hover.
البرنامج المساعد Boostrap-hover-dropdown.js ، عنوان URL للكود المستضاف على Github: عرض
هنا هو رمز المكون الإضافي الكامل JS:
// bootstrap شريط التنقل المستجيب <br> ؛ (الوظيفة ($ ، نافذة ، غير محددة) {// خارج نطاق المكون الإضافي jQuery إلى // تتبع جميع القائمة المنسدلة var $ alldropdowns = $ () ؛ حول // هو الوالد المنسدلة $ alldropdowns = $ alldropdowns.add (this.parent ()) ؛ $ (this) .data ('close-shother')} ، reports = $ .extend (true ، {} ، defults ، reports) ، timeout ؛ Function () {timeout = settime.out () {$ this.removeclass ('Open') ؛يمكنك أن ترى أن المؤلف قد أضاف فاصلة فاصلة أمام المكون الإضافي ، مما يزيد من توافق المكون الإضافي ، لأنه قد لا يتم كتابة رمز JS السابق ؛ إذا لم تتم إضافة Semicolon هنا ، فقد يتسبب ذلك في خطأ JS لأنه لا يوجد كسر خط.
المعلمات الاختيارية
التأخير: (معلمة اختيارية) التأخير في مللي ثانية. هذا هو الوقت المناسب لإغلاق المنسدلة قبل أن لا يكون الماوس في القائمة المنسدلة أو عنصر الزر/التنقل ، قم بتنشيطه. القيمة الافتراضية هي 500.
على الفور ، (معلمة اختيارية) ، ستغلق قيمة منطقية ، إذا كانت صحيحة ، جميع القوائم المنسدلة الأخرى على الفور عند بدء التنقل المحدد الجديد المطابق. القيمة الافتراضية صحيحة.
بعد إضافة رمز JS أعلاه ، لا يمكن تحقيق التأثير في هذا الوقت ، لأننا بحاجة إلى القيام بخطوة أخرى ، وهي إضافة سمات البيانات-* إلى العنصر:
حار البيانات = "المنسدلة"
أكمل رمز عنصر HTML:
انسخ الرمز كما يلي: <a href = "javaScript :؛" data-toggle = "REPDOWN" data-hover = "sropdown"> </a>
يمكن تعيين الخيارات من خلال سمات البيانات ، أو من خلال أخطاء البيانات وأختام البيانات
انسخ الرمز كما يلي: <a href = "#" data-toggle = "tropdown" data-hover = "REPDOWN" data-delay = "1000" data-close-other = "false"> </a>
بالطبع ، هناك أيضًا أسهل طريقة ، وهي استخدام CSS تحوم للتحكم
[/code] .nav> li: hover .dropdown-menu {display: block ؛} [/code]
يمكن أن يحقق هذا النوع من الكود أيضًا تأثير التحويم المطلوب ، ولكن إذا قمت بالنقر فوق المكون عند التحوم ثم انتقل إلى مكون آخر إلى التحوم ، فسيظهر التأثير التالي:
إذا كنت لا تزال ترغب في التعلم بعمق ، فيمكنك النقر هنا للتعلم وإرفاق موضوعين مثيرين لك: Bootstrap التعلم التعليمي التعليمي التعليمي العملي
ما سبق هو طريقة استخدام مكون Bootstrap المنسدلة الذي شاركته معك. آمل أن يكون من المفيد لك إتقان حدث التحويم.