في الآونة الأخيرة ، استخدمت الشركة وظيفة قائمة bootstrap لصنع صفحات الويب. كان من الضروري تحوم الماوس لعرض القائمة الثانوية ، لذلك درستها ووجدت أن هناك طريقتين ربما.
الطريقة الأولى: تعديل ورقة الأنماط
في الواقع ، انها بسيطة نسبيا. تحتاج فقط إلى إضافة CSS لتعيين حالة Hover وتعيين القائمة المنسدلة لحظرها. ل CSS محددة:
نسخة الكود كما يلي:
.NAV> li: hover .dropdown-menu {display: block ؛}
تتم إضافة هذه الجملة CSS إلى CSS التي تظهر بعد bootstrap.min.css ، جربها!
عيب:
1. لا يمكن النقر فوق القائمة العليا المقابلة
2. بعد أن تنزلق الماوس إلى القائمة الثانوية ، لا تحتوي القائمة العلوية على نمط
الطريقة الثانية: استخدم ميزات jQuery للتنفيذ
جنبا إلى جنب مع البرامج التعليمية عبر الإنترنت ، يمكن لحدث اثنين في jQuery حل المشكلة. ل CSS محددة:
نسخة الكود كما يلي:
// أغلق حدث click.bd.dropdown.data-api لجعل القائمة العليا قابلة للنقر
$ (document) .off ('click.bs.dropdown.data-api') ؛
// الأصل تلقائيًا
$ ('.
$ (هذا) .addClass ('Open') ؛
}) ؛
//إبداعي
$ ('.
$ (هذا) .removeclass ('Open') ؛
}) ؛
لا تتيح لك هذه الطريقة النقر فقط على القائمة العليا ، ولكن أيضًا لا تفقد الأسلوب ، ولكنها أيضًا تحل مشكلة تحوم الماوس في Bootstrap. يوصى بالجميع.