Yıkılmak
Birkaç sınıf ve JavaScript eklentilerimizle projenizdeki içeriğin görünürlüğünü değiştirin.
Sınıf değişiklikleri yoluyla başka bir öğeyi göstermek ve gizlemek için aşağıdaki düğmeleri tıklayın:
.collapseiçeriği gizler.collapsinggeçişler sırasında uygulanır.collapse.showiçeriği gösterir
Öznitelik içeren bir bağlantı hrefveya öznitelik içeren bir düğme kullanabilirsiniz data-target. Her iki durumda data-toggle="collapse"da gereklidir.
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>A <button>veya birden çok öğeyi veya özniteliğinde <a>bir JQuery seçiciyle bunlara başvurarak gösterebilir ve gizleyebilir . Birden çok veya bir öğeyi her biri veya özniteliği ile referans alıyorsa gösterip gizleyebilirhrefdata-target<button><a>hrefdata-target
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
</div>Kart bileşenini kullanarak, bir akordeon oluşturmak için varsayılan daraltma davranışını genişletebilirsiniz.
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>aria-expandedKontrol öğesine eklediğinizden emin olun . Bu öznitelik, kontrole bağlı daraltılabilir öğenin mevcut durumunu ekran okuyuculara ve benzer yardımcı teknolojilere açıkça iletir. Daraltılabilir öğe varsayılan olarak kapalıysa, kontrol öğesindeki özniteliğin değeri olmalıdır aria-expanded="false". showSınıfı kullanarak daraltılabilir öğeyi varsayılan olarak açık olacak şekilde ayarladıysanız aria-expanded="true", bunun yerine denetimde ayarlayın. Eklenti, daraltılabilir öğenin açılıp kapanmadığına (JavaScript aracılığıyla veya kullanıcının aynı daraltılabilir öğeye bağlı başka bir kontrol öğesini tetiklemesi nedeniyle) bağlı olarak kontrolde bu özniteliği otomatik olarak değiştirir. Kontrol öğesinin HTML öğesi bir düğme değilse (örneğin, an <a>veya <div>), öznitelikrole="button"elemana eklenmelidir.
Kontrol öğeniz tek bir daraltılabilir öğeyi hedefliyorsa - yani data-targetnitelik bir seçiciye işaret ediyorsa - niteliği, daraltılabilir öğenin öğesini içeren kontrol öğesine ideklemelisiniz . Modern ekran okuyucular ve benzer yardımcı teknolojiler, kullanıcılara doğrudan daraltılabilir öğeye gitmeleri için ek kısayollar sağlamak için bu özelliği kullanır.aria-controlsid
Bootstrap'in mevcut uygulamasının WAI-ARIA Yazma Uygulamaları 1.1 akordeon modelinde açıklanan çeşitli klavye etkileşimlerini kapsamadığını unutmayın - bunları özel JavaScript'e kendiniz eklemeniz gerekecektir.
Daraltma eklentisi, ağır kaldırmayı halletmek için birkaç sınıf kullanır:
.collapseiçeriği gizler.collapse.showiçeriği gösterir.collapsinggeçiş başladığında eklenir ve bittiğinde kaldırılır
Bu sınıflar adresinde bulunabilir _transitions.scss.
Bir veya daha fazla daraltılabilir öğenin kontrolünü otomatik olarak atamak için öğeye data-toggle="collapse"ve a ekleyin . data-targetNitelik data-target, daraltmanın uygulanacağı bir CSS seçiciyi kabul eder. collapseSınıfı daraltılabilir öğeye eklediğinizden emin olun . Varsayılan olarak açılmasını istiyorsanız, ek sınıfı ekleyin show.
Daraltılabilir bir alana akordeon benzeri grup yönetimi eklemek için data niteliğini ekleyin data-parent="#selector". Bunu çalışırken görmek için demoya bakın.
Şunlarla manuel olarak etkinleştirin:
$('.collapse').collapse()Seçenekler, veri öznitelikleri veya JavaScript aracılığıyla iletilebilir. Veri öznitelikleri için, seçenek adını olduğu data-gibi ekleyin data-parent="".
| İsim | Tip | Varsayılan | Tanım |
|---|---|---|---|
| ebeveyn | seçici | jQuery nesnesi | DOM öğesi | yanlış | Üst öğe sağlanmışsa, bu daraltılabilir öğe gösterildiğinde belirtilen üst öğenin altındaki tüm daraltılabilir öğeler kapatılacaktır. (geleneksel akordeon davranışına benzer - bu, cardsınıfa bağlıdır). Nitelik, hedef daraltılabilir alanda ayarlanmalıdır. |
| geçiş | boole | doğru | Çağrı sırasında daraltılabilir öğeyi değiştirir |
Asenkron yöntemler ve geçişler
Tüm API yöntemleri eşzamansızdır ve bir geçiş başlatır . Geçiş başlar başlamaz ancak bitmeden arayan kişiye geri dönerler . Ek olarak, geçiş yapan bir bileşen üzerindeki bir yöntem çağrısı yoksayılacaktır .
İçeriğinizi daraltılabilir bir öğe olarak etkinleştirir. İsteğe bağlı seçenekleri kabul eder object.
$('#myCollapsible').collapse({
toggle: false
})Daraltılabilir bir öğeyi gösterilen veya gizli olarak değiştirir. Arayana daraltılabilir öğe fiilen gösterilmeden veya gizlenmeden önce (yani shown.bs.collapseveya hidden.bs.collapseolayı gerçekleşmeden önce) döner.
Katlanabilir bir öğe gösterir. Katlanabilir öğe fiilen gösterilmeden önce (yani shown.bs.collapseolay meydana gelmeden önce) arayana geri döner.
Bir daraltılabilir öğeyi gizler. Arayana daraltılabilir öğe fiilen gizlenmeden önce (yani hidden.bs.collapseolay meydana gelmeden önce) döner.
Bir öğenin çöküşünü yok eder.
Bootstrap'in daraltma sınıfı, daraltma işlevine bağlanmak için birkaç olayı ortaya çıkarır.
| Etkinlik tipi | Tanım |
|---|---|
| show.bs.collapse | Bu olay, showörnek yöntemi çağrıldığında hemen tetiklenir. |
| Gösterilen.bs.collapse | Bu olay, bir daraltma öğesi kullanıcıya görünür hale getirildiğinde tetiklenir (CSS geçişlerinin tamamlanmasını bekler). |
| hide.bs.collapse | hideBu olay, yöntem çağrıldığında hemen tetiklenir . |
| gizli.bs.collapse | Bu olay, bir daraltma öğesi kullanıcıdan gizlendiğinde tetiklenir (CSS geçişlerinin tamamlanmasını bekler). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something…
})