يشرح الفصل القائمة المنسدلة Bootstrap القائمة المنسدلة ، ولكنه لا يتضمن جزء التفاعل. سيشرح هذا الفصل تفاعل القائمة المنسدلة بالتفصيل. باستخدام المكون الإضافي المنسدلة ، يمكنك إضافة قوائم منسدلة إلى أي مكون (مثل قضبان التنقل ، وعلامات التبويب ، وقوائم التنقل ، والأزرار ، إلخ).
إذا كنت ترغب في الرجوع إلى وظيفة المكون الإضافي بشكل منفصل ، فأنت بحاجة إلى الرجوع إلى REPDOWN.JS. أو ، كما هو مذكور في الفصل الإضافي في Bootstrap ، يمكنك الرجوع إلى bootstrap.js أو إصدارات مضغوطة من bootstrap.min.js.
1. الاستخدام
يمكنك تبديل المحتوى المخفي لقائمة القائمة المنسدلة (المنسدلة):
1. استخدم سمة البيانات: أضف البيانات toggle = "المنسدلة" إلى الرابط أو الزر لتبديل القائمة المنسدلة ، كما هو موضح أدناه:
<viv> <a data-toggle = "sropdown" href = "#"> trigger trigger </a> <ul roly = "menu"
إذا كنت بحاجة إلى الحفاظ على الرابط سليمًا (مفيد عندما لا يمكّن المتصفح javaScript) ، فاستخدم خاصية تهدف البيانات بدلاً من HREF = "#":
<viv> <a id = "dlabel" rob = "button" data-toggle = "sropdown" data-target = "#" href = "/page.html
2. من خلال JavaScript: للتبديل عبر JavaScript ، يرجى استخدام الطريقة التالية:
$ ('. القائمة المنسدلة'). القائمة المنسدلة ()
2. مثال بسيط على القائمة المنسدلة
بشكل عام ، يكون الرمز هو نفسه طرق المكون:
// الاستخدام التصريح <div> <button data-toggle = "tropdown"> القائمة المنسدلة <span> </span> </ultron> <ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#" HREF = "#"> حول </a> </li></ul> </viv>
جوهر الاستخدام التعريفي الرئيسي:
1. استخدم الحزم للحاويات المحيطية ؛
2. ربط البيانات toggle = "المنسدلة" لحدث زر النقر الداخلي ؛
3. استخدم عناصر القائمة.
// إذا كان الزر خارج الحاوية ، فيمكن ربطه من خلال استهدف البيانات. <button id = "btn" data-toggle = "REPDOWN" Target = "#tropdown"> في مكالمات JavaScript ، لا توجد خصائص والطريقة ليست سهلة الاستخدام. فيما يلي أربعة أحداث أساسية. // طريقة القائمة المنسدلة ، ولكن لا تزال تحتاج إلى بيانات-*$ ('#btn'). REPDOWN () ؛ $ ('#btn'). المنسدلة ('Toggle') ؛تدعم القائمة المنسدلة 4 أنواع من الأحداث ، المقابلة قبل المنبثقة ، وبعد المنبثقة ، قبل الإغلاق وبعد الإغلاق.
// أحداث ، $ $ (##stropdown '). على (' show.bs.dropdown '، function () {Alert (' freaks على الفور عندما تسمى طريقة العرض! ') ؛}) ؛3. استخدام القوائم المنسدلة في صفحة علامة التبويب
<! doctype html> <html> <head> <title> مثيل bootstrap - صفحة العلامة مع قائمة منسدلة </title> <link href = "/bootstrap/css/boutstrap.min.css" cript> src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <p> صفحة علامة مع قائمة منسدلة </p> <ul> <li> <a href = "#"> home </a> </li> <li> href = "#"> iOS </a> </li> <li> <a href = "#"> vb.net </a> </li> <li> <a data-toggle = "tropown" href = "#" href = "#"> jmeter </a> </li> <li> <a href = "#"> ejb </a> </li> <li> <a href = "#"
صورة التكاثر:
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وتوصيل 3 موضوعات مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون مفيدًا لتعلم الجميع.