JS Collapse (collapse.js)
الحصول على أساليب القاعدة ودعم مرونة لمكونات قابلة للطي مثل الأكورديون والملاحة.
المساعد التبعية: إغلاق يتطلب التحولات المساعد ليتم تضمينها في الإصدار الخاص بك من التمهيد.
لتعليمي حول Collapsibles، اقرأ Bootstrap Collapse تعليمي .
The Collapse Plugin Classes
| صف مدرسي | وصف | مثال |
|---|---|---|
| .collapse | يخفي المحتوى | جربها |
| .collapse in | يظهر المحتوى | جربها |
| .collapsing | وأضاف عندما تبدأ عملية الانتقال، وإزالة عندما ينتهي | جربها |
عبر data-* سمات
فقط إضافة data-toggle="collapse" والمستهدفة البيانات إلى عنصر لتعيين السيطرة على عنصر للطي آليا. السمة المستهدفة البيانات تقبل محدد CSS لتطبيق انهيار ل. تأكد من إضافة انهيار فئة إلى عنصر للطي. إذا كنت ترغب في ذلك لتقصير مفتوحة، إضافة طبقة إضافية في.
مثال
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
انها محاولة لنفسك » تلميح: لإضافة إدارة مجموعة تشبه الأكورديون إلى عنصر تحكم للطي، إضافة السمة بيانات data-parent="#selector" .
عن طريق جافا سكريبت
تمكين يدويا مع:
$('.collapse').collapse()خيارات انهيار
يمكن أن تنتقل عن طريق الخيارات سمات البيانات أو جافا سكريبت. لسمات البيانات، إلحاق اسم الخيار لبالبيانات، كما في data-parent="" .
| اسم | اكتب | افتراضي | وصف |
|---|---|---|---|
| parent | selector | false | سيتم إغلاق كافة عناصر للطي تحت الوالد المحدد عند عرض هذا البند للطي. (على غرار السلوك الأكورديون التقليدي - هذا يعتمد على الطبقة وحة) - انظر المثال أدناه |
| toggle | boolean | true | تبديل عنصر للطي على الاحتجاج |
طرق انهيار
يسرد الجدول التالي أساليب انهيار كل ما هو متاح.
| طريقة | وصف | جربها |
|---|---|---|
| .collapse( options ) | ينشط عنصر للطي مع خيار. رؤية الخيارات المذكورة أعلاه لقيم صالحة | |
| .collapse("toggle") | تبديل عنصر للطي | جربها |
| .collapse("show") | يظهر عنصر للطي | جربها |
| .collapse("hide") | يخفي عنصر للطي | جربها |
انهيار الأحداث
يسرد الجدول التالي الأحداث انهيار كل ما هو متاح.
| حدث | وصف | جربها |
|---|---|---|
| show.bs.collapse | يحدث عند عنصر للطي على وشك أن تظهر | جربها |
| shown.bs.collapse | يحدث عندما يتم عرض عنصر للطي بالكامل (بعد الانتهاء التحولات CSS) | جربها |
| hide.bs.collapse | يحدث عند عنصر للطي على وشك أن تكون مخفية | جربها |
| hidden.bs.collapse | يحدث عندما يتم إخفاء عنصر للطي بالكامل (بعد الانتهاء التحولات CSS) | جربها |
أمثلة
بسيط قابل للانهيار
المثال التالي يجعل زر تبديل محتوى توسيع وطيها من عنصر آخر:
مثال
<button type="button" class="btn btn-info" data-toggle="collapse"
data-target="#demo">
Simple collapsible
</button>
<div id="demo"
class="collapse in">
Lorem ipsum dolor sit amet, consectetur
adipisicing elit,
sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</div> انها محاولة لنفسك » لوحة قابلة للطي
يظهر المثال التالي لوحة قابلة للطي:
مثال
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4
class="panel-title">
<a
data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1"
class="panel-collapse collapse">
<div
class="panel-body">Panel Body</div>
<div
class="panel-footer">Panel Footer</div>
</div>
</div>
</div> انها محاولة لنفسك » قائمة المجموعة للطي
ويبين الجدول التالي لوحة قابلة للطي مع مجموعة قائمة داخل:
مثال
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4
class="panel-title">
<a
data-toggle="collapse" href="#collapse1">Collapsible list group</a>
</h4>
</div>
<div id="collapse1"
class="panel-collapse collapse">
<ul
class="list-group">
<li
class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
</div> انها محاولة لنفسك » أكورديون
يظهر المثال التالي الأكورديون بسيط من خلال توسيع عنصر لوحة:
ملاحظة: data-parent السمة بالتأكد من أن جميع العناصر للطي تحت الوالد المحدد سيتم إغلاق عندما يظهر واحد من هذا البند للطي.
مثال
<div class="panel-group" id="accordion">
<div class="panel
panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a
data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Collapsible
Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse
collapse in">
<div class="panel-body">Lorem
ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad
minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4
class="panel-title">
<a
data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Collapsible
Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse
collapse">
<div class="panel-body">Lorem
ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad
minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4
class="panel-title">
<a
data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Collapsible
Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse
collapse">
<div class="panel-body">Lorem
ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad
minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
</div> انها محاولة لنفسك » توسيع وطي تبديل دلالات والنصوص
يغير المثال التالي / نص وثيقة مفتوحة ورمز عند فتح وإغلاق محتوى قابل للطي:
مثال
$(document).ready(function(){
$("#demo").on("hide.bs.collapse",
function(){
$(".btn").html('<span class="glyphicon
glyphicon-collapse-down"></span> Open');
});
$("#demo").on("show.bs.collapse", function(){
$(".btn").html('<span
class="glyphicon glyphicon-collapse-up"></span> Close');
});
}); انها محاولة لنفسك » أو يمكنك استخدام CSS:
مثال
/* Icon when the collapsible content is shown */
.btn:after {
font-family: "Glyphicons Halflings";
content: "\e114";
}
/* Icon when the collapsible content
is hidden */
.btn.collapsed:after {
content: "\e080";
} انها محاولة لنفسك »