عند استخدام مكون Bootstrap Favigation Bar ، إذا كان شريط التنقل الخاص بك يحتوي على قائمة منسدلة ، فإن هذا التنقل مع القائمة المنسدلة سيعمل فقط على القائمة المنسدلة عند النقر عليها. ستكون سمة HREF الخاصة بها غير صالحة ، مما يعني أنها تفقد وظيفة الارتباط التشعبي. هذا ليس ما أريد. آمل أن يتمكن رابط شريط التنقل من فتح رابطه بشكل طبيعي ، لكنه يحتاج أيضًا إلى وظيفة القائمة المنسدلة ، والبدء في القذف ~
أولاً ، حل مشكلة النقر على شريط التنقل باستخدام قائمة منسدلة. يتم تنفيذ تأثير القائمة المنسدلة بواسطة JS. يوضح تحليل ملف bootstrap.js أن bootstrap كتب القائمة المنسدلة كمكون إضافي jQuery ووجد بعض الجمل الرئيسية في قطاع رمز القائمة المنسدلة:
// تنطبق على العناصر المنسدلة القياسية // ================================================================================ النموذج '، function (e) {بعد العثور على عدد قليل من الرموز الرئيسية ، فكرت في حل. فقط أغلق حدث Click.bs.dropdown.data-api وسيكون على ما يرام. الرمز كما يلي:
$ (document) .Ready (function () {$ (document) .off ('click.bs.dropdown.data-api') ؛}) ؛اختبار الكود أعلاه فعال. يمكن النقر فوق شريط التنقل لحل المشكلة. فيما يلي حل مشكلة تحوم الماوس والقائمة المنسدلة. هذا بسيط نسبيا. يمكن تنفيذها مع حدث الماوس JQuery. الرمز كما يلي:
$ (document) .Ready (function () {dropdownopen () ؛ // call}) ؛/*** قم بتوسيع القائمة الفرعية عند مرور الماوس ، حتى لا تحتاج إلى النقر لتوسيع*/وظيفة dropdownopen () {var $ dropdownli = $ ('li.dropdown') {$ (this) .addClass ('Open') ؛}). mouseout (function () {$ (this) .removeclass ('Open') ؛}) ؛}ما سبق هو رمز التنفيذ الخاص بشريط التنقل في Bootstrap الذي يمكن النقر عليه وتحومه لعرض القائمة المنسدلة. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!