يجعل المكون الإضافي للانهيار من السهل طي منطقة الصفحة. سواء كنت تستخدمه لإنشاء تنقل منهار أو لوحة محتوى ، فإنه يسمح بالكثير من خيارات المحتوى.
إذا كنت ترغب في الرجوع إلى وظيفة المكون الإضافي بشكل فردي ، فأنت بحاجة إلى الرجوع إلى Cllapse.js ، أو ، كما هو مذكور في الفصل الإضافي في Pootstrap ، يمكنك الرجوع إلى bootstrap.js أو إصدارات مضغوطة من bootstrap.min.js.
1. الاستخدام
يسرد الجدول التالي المكون الإضافي للانهيار للتعامل مع التحجيم الثقيل:
يمكنك استخدام المكون الإضافي للانهيار بطريقتين:
من خلال سمة البيانات: أضف البيانات toggle = "الانهيار" واستهداف البيانات للعنصر لتعيين عناصر التحكم تلقائيًا للعناصر القابلة للطي. تقبل خاصية استهداف البيانات محدد CSS وتطبق تأثير الانهيار عليه. تأكد من إضافة فئة. collapse إلى العنصر القابل للطي. إذا كنت تريد أن تكون بشكل افتراضي ، فأضف فئة إضافية. في.
لإضافة إدارة تجميع تشبه اللوحة المطوية إلى عنصر التحكم القابل للطي ، أضف بيانات خصائص البيانات-"#"#Selector ".
من خلال JavaScript : يمكن تنشيط طريقة الانهيار من خلال JavaScript ، كما هو موضح أدناه:
$ ('. الانهيار'). الانهيار ()
2. أمثلة
يمكن أن ينهار المحتوى بالنقر.
// مثال أساسي
<button data-toggle = "collapse" data-target = "#content"> bootstrap </button> <div id = "content"> <viv> bootstrap عبارة عن مجموعة أدوات مفتوحة المصدر لتطوير الواجهة الأمامية التي تم إطلاقها بواسطة Twitter. تم تطويره بواسطة مصمم Twitter Mark Otto و Jacob Thornton وهو إطار CSS/HTML. حاليا ، أحدث إصدار من bootstrap هو 3.0. </viv> </viv>
// أكورديون قابلة للطي
<div id = "orcordion"> <viv> <viv> <h4> <a href = "#collapseone" data-toggle = "collapse" data-parent = "#corrcorion"> انقر لي لعرضه ، ثم انقر فوق لي للطي ، الجزء 1 </a4 </h4> </fiv> <div id = "collapseone" <iv> هنا هو الجزء الأول. </viv> </viv> </viv> <viv> <h4> <a href = "#collapsetwo" data-toggle = "collapse" data-parent = "#corrcorion"> انقر لي لعرضه ، ثم انقر فوق لي للطي ، الجزء 2 </a> </h4> </div> <div id = "collapsetwo"> </viv> </viv> </viv> <viv> <viv> <h4> <a href = "#collapsethree" data-toggle = "collapse" data-parent = "#corrcorion"> انقر لي لعرضه ، ثم انقر على طي ، الجزء 3 </a> </h4> </div id = "clamplapsree"> هنا هو الجزء الثالث. </viv> </viv> </viv> </viv>
// تأثير الأكورديون
$ ('#collapseone ،#collapsetwo ،#collapsethree ،#collapsefour'). الانهيار ({parent: '#Accordion' ، Toggle: false ،}) ؛// اتصل يدويًا
$ ('button'). on ('click' ، function () {$ ('#collapseOne'). cllapse ({toggle: true ،}) ؛}) ؛// توفر طريقة الانهيار أيضًا ثلاثة معلمات: إخفاء ، إظهار ، وتبديل.
$ ('#collapseone'). الانهيار ('Hide') ؛ $ ('#collapsetwo'). الانهيار ('show') ؛ $ ('button'). on ('click' ، function () {$ ('#collapseone'). collapse ('Toggle') ؛}) ؛هناك أربعة أنواع من الأحداث في المكون الإضافي.
// الأحداث ، أوجه التشابه الأخرى
$ ('#collapseone'). on ('show.bs.collapse' ، function () {Alert ('free at the show the show exiber') ؛}) ؛آمل أن تكون هذه المقالة مفيدة وملهمة للتعرف على المكون الإضافي لانهيار bootstrap.