in English

Yıkılmak

Birkaç sınıf ve JavaScript eklentilerimizle projenizdeki içeriğin görünürlüğünü değiştirin.

Nasıl çalışır

Daraltma JavaScript eklentisi, içeriği göstermek ve gizlemek için kullanılır. Düğmeler veya çapalar, geçiş yaptığınız belirli öğelerle eşlenen tetikleyiciler olarak kullanılır. Bir öğeyi daraltmak height, mevcut değerinden 'a animasyon uygulayacaktır 0. paddingCSS'nin animasyonları nasıl işlediği göz önüne alındığında , bir .collapseöğe üzerinde kullanamazsınız . Bunun yerine, sınıfı bağımsız bir sarma öğesi olarak kullanın.

Bu bileşenin animasyon efekti prefers-reduced-motionortam sorgusuna bağlıdır. Erişilebilirlik belgelerimizin azaltılmış hareket bölümüne bakın .

Örnek

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

data-targetGenel olarak, özniteliği olan bir düğme kullanmanızı öneririz . Anlamsal açıdan önerilmese de, hrefözniteliği (ve a role="button") içeren bir bağlantı da kullanabilirsiniz. Her iki durumda data-toggle="collapse"da gereklidir.

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
<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">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

Yatay

Daraltma eklentisi ayrıca yatay çökmeyi de destekler. Bunun yerine .widthgeçiş yapmak için değiştirici sınıfını ekleyin ve hemen alt öğeye a ayarlayın . Kendi özel Sass'ınızı yazmaktan, satır içi stilleri kullanmaktan veya genişlik yardımcı programlarımızı kullanmaktan çekinmeyin .widthheightwidth

min-heightAşağıdaki örnekte , dokümanlarımızda aşırı yeniden boyamayı önlemek için bir set olmasına rağmen, bunun açıkça gerekli olmadığını lütfen unutmayın . Yalnızca widthon alt öğe gereklidir.

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
<p>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse width" id="collapseWidthExample">
    <div class="card card-body" style="width: 320px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </div>
</div>

Birden çok hedef

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

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
<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">
        Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
</div>

akordeon örneği

Kart bileşenini kullanarak, bir akordeon oluşturmak için varsayılan daraltma davranışını genişletebilirsiniz. Akordeon stilini düzgün bir şekilde elde etmek için .accordionsarıcı olarak kullandığınızdan emin olun.

İlk akordeon paneli için bazı yer tutucu içerikler. .showBu panel, sınıf sayesinde varsayılan olarak gösterilir .

Some placeholder content for the second accordion panel. This panel is hidden by default.

And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the second accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
</div>

Ulaşılabilirlik

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 ARIA Yazma Uygulamaları Kılavuzu akordeon modelinde açıklanan çeşitli klavye etkileşimlerini kapsamadığını unutmayın ; bunları özel JavaScript'e kendiniz eklemeniz gerekecektir.

kullanım

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.

Veri öznitelikleri aracılığıyla

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.

JavaScript aracılığıyla

Şunlarla manuel olarak etkinleştirin:

$('.collapse').collapse()

Seçenekler

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

yöntemler

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 .

Daha fazla bilgi için JavaScript belgelerimize bakın .

.collapse(options)

İçeriğinizi daraltılabilir bir öğe olarak etkinleştirir. İsteğe bağlı seçenekleri kabul eder object.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

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.

.collapse('show')

Katlanabilir bir öğe gösterir. Katlanabilir öğe fiilen gösterilmeden önce (yani shown.bs.collapseolay meydana gelmeden önce) arayana geri döner.

.collapse('hide')

Bir daraltılabilir öğeyi gizler. Arayana daraltılabilir öğe fiilen gizlenmeden önce (yani hidden.bs.collapseolay meydana gelmeden önce) döner.

.collapse('dispose')

Bir öğenin çöküşünü yok eder.

Olaylar

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...
})