التمهيد القائمة المنسدلة (منسدلة) القطعة
التمهيد القائمة المنسدلة يشرح هذا الفصل من القائمة المنسدلة، ولكن لا علاقة لها الجزء التفاعل، فإن هذا الفصل يشرح بالتفصيل التفاعل من القائمة المنسدلة. استخدم القائمة المنسدلة (منسدلة) في المكونات، يمكنك إضافة قائمة منسدلة إلى أي من المكونات (مثل شريط التنقل، علامات التبويب، وكبسولات، والقوائم الملاحة، أزرار، الخ).
إذا كنت ترغب في الرجوع إلى الميزات الفردية في المكونات، تحتاج إلى مرجعdropdown.js.أو كما التمهيد المساعد لمحة ذكر الفصل، يمكنك الرجوع إلىbootstrap.jsأو نسخة مضغوطة منbootstrap.min.js.
استعمال
يمكنك تبديل القائمة المنسدلة اخفاء (منسدلة) المكونات في:
- من خلال سمات البيانات: ارتباط أو زر لإضافة-تبديل البيانات = "المنسدلة"القائمة المنسدلة للتبديل، على النحو التالي:
<فئة الدرجة = "المنسدلة">
<a data-toggle="dropdown" القائمة المنسدلة href="#"> (منسدلة) الزناد </A>
<الطبقة UL = "المنسدلة-القائمة" دور = "القائمة" الأغنية-labelledby = "dLabel">
...
</ UL>
</ div>
إذا كنت بحاجة للحفاظ على صلة سليمة (مفيدة عندما لم يتم تمكين متصفح جافا سكريبت)، يرجى استخدامالسمة الهدف البيانات بدلا من أ href = "#":
<فئة الدرجة = "المنسدلة">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
سحب إلى أسفل القائمة (منسدلة) <تمتد الطبقة = "الإقحام"> </ SPAN>
</A>
<الطبقة UL = "المنسدلة-القائمة" دور = "القائمة" الأغنية-labelledby = "dLabel">
...
</ UL>
</ div>
- بواسطة جافا سكريبت: جافا سكريبت عن طريق استدعاء القائمة المنسدلة للتبديل، يرجى استخدام الأسلوب التالي:
$ ( '. منسدلة-تبديل). منسدلة ()
أمثلة
في شريط التنقل
يوضح المثال التالي استخدام القائمة المنسدلة شريط التنقل:
أمثلة
<التنقل الطبقة = "الناف بار نافبار الافتراضي" دور = "الملاحة">
<div الطبقة = "حاوية السائل">
<div الطبقة = "الناف بار-رأس">
<A الطبقة = "الناف بار العلامة التجارية" أ href = "#"> البرنامج التعليمي </ A>
</ div>
<div>
<UL الطبقة = "الملاحة الناف بار-الملاحة" >
<لي الطبقة = "نشطة"> <ل أ href = "#"> دائرة الرقابة الداخلية < / أ> </ لى>
<لي> <ل أ href = "#"> SVN < / أ> </ لى>
<لي الطبقة = "المنسدلة">
<A أ href = "#" الطبقة = "المنسدلة-تبديل" بيانات تبديل = "المنسدلة"> جافا <ب الطبقة = "الإقحام"> </ B>
</ A>
<UL الطبقة = "المنسدلة-القائمة">
<لي> <ل أ href = "#"> jmeter < / أ> </ لى>
<لي> <ل أ href = "#"> المنظمة بتبني < / أ> </ لى>
<لي> <ل أ href = "#"> تقرير جاسبر </ أ> </ لى>
<لي الطبقة = "المفرق"> </ لى>
<لي> <ل أ href = "#"> رابط معزولة </ أ> </ لى>
<لي الطبقة = "المفرق"> </ لى>
<لي> <ل أ href = "#"> رابط معزولة آخر </ أ> </ لى>
</ UL>
</ لى>
</ UL>
</ div>
</ div>
</ التنقل>
وكانت النتائج على النحو التالي:
في علامة تبويب داخل
يوضح المثال التالي استخدام علامة التبويب في القائمة المنسدلة:
أمثلة
<P> العلامة مع القائمة المنسدلة صفحة </ P>
<UL الطبقة = "الملاحة الملاحة علامات التبويب" >
<لي الطبقة = "نشطة">
<A أ href = "#"> الصفحة الرئيسية < / أ> </ لى>
<لي>
<A أ href = "#"> SVN < / أ> </ لى>
<لي>
<A أ href = "#"> دائرة الرقابة الداخلية < / أ> </ لى>
<لي>
<A أ href = "#"> VB.Net < / أ> </ لى>
<لي الطبقة = "المنسدلة">
<A الطبقة = "المنسدلة-تبديل" ، تبديل البيانات = "المنسدلة" أ href = "#"> جافا < تمتد الطبقة = "الإقحام"> </ SPAN> </ أ>
<UL الطبقة = "المنسدلة-القائمة">
<لي>
<A أ href = "#"> سوينغ < / أ> </ لى>
<لي>
<A أ href = "#"> jMeter < / أ> </ لى>
<لي>
<A أ href = "#"> المنظمة بتبني < / أ> </ لى>
<لي الطبقة = "المفرق"> </ لى>
<لي>
<A أ href = "#"> رابط معزولة </ أ> </ لى>
</ UL>
</ لى>
<لي>
<A أ href = "#"> PHP < / أ> </ لى>
</ UL>
وكانت النتائج على النحو التالي:
خيارات
لا توجد خيارات.
الطريق
القائمة المنسدلة للتبديل هناك طريقة بسيطة لعرض أو إخفاء القائمة المنسدلة.
$ (). منسدلة ( 'تبديل')
أمثلة
يوضح المثال التالي من القائمة المنسدلة (منسدلة) المكونات في الأسلوب:
أمثلة
<التنقل الطبقة = "الناف بار نافبار الافتراضي" دور = "الملاحة">
<div الطبقة = "حاوية السائل">
<div الطبقة = "الناف بار-رأس">
<A الطبقة = "الناف بار العلامة التجارية" أ href = "#"> W3Cschool < / A>
</ div>
<div معرف = "myexample">
<UL الطبقة = "الملاحة الناف بار-الملاحة" >
<لي الطبقة = "نشطة">
<A أ href = "#"> دائرة الرقابة الداخلية < / A>
</ لى>
<لي>
<A أ href = "#"> SVN < / A>
</ لى>
<لي الطبقة = "المنسدلة">
<A أ href = "#" الطبقة = "المنسدلة-تبديل" بيانات تبديل = "المنسدلة"> جافا <ب الطبقة = "الإقحام"> </ B>
</ A>
<UL الطبقة = "المنسدلة-القائمة">
<لي>
<A معرف = "العمل-1" أ href = "#"> jmeter < / A>
</ لى>
<لي>
<A أ href = "#"> المنظمة بتبني < / A>
</ لى>
<لي>
<A أ href = "#"> تقرير جاسبر </ A>
</ لى>
<لي الطبقة = "المفرق"> </ لى>
<لي>
<A أ href = "#"> رابط معزولة </ A>
</ لى>
<لي الطبقة = "المفرق"> </ لى>
<لي>
<A أ href = "#"> رابط معزولة آخر </ A>
</ لى>
</ UL>
</ لى>
</ UL>
</ div>
</ div>
</ التنقل>
</ div>
<script> $ (وظيفة () {$ ( "المنسدلة-تبديل.") منسدلة ( 'تبديل')؛.})؛ </ script>
وكانت النتائج على النحو التالي:
