崩壊
いくつかのクラスと JavaScript プラグインを使用して、プロジェクト全体のコンテンツの表示を切り替えます。
下のボタンをクリックして、クラスの変更によって別の要素を表示および非表示にします。
.collapseコンテンツを非表示にします.collapsing遷移中に適用されます.collapse.showコンテンツを表示
属性を持つリンクhref、または属性を持つボタンを使用できdata-targetます。どちらの場合も、data-toggle="collapse"が必要です。
<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><button>orは、 or属性<a>の JQuery セレクターを使用して複数の要素を参照することで、複数の要素を表示および非表示にすることができます。複数のorがそれぞれのor属性で要素を参照している場合、要素を表示および非表示にすることができますhrefdata-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>cardコンポーネントを使用すると、デフォルトの折りたたみ動作を拡張してアコーディオンを作成できます。
<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-expanded必ずコントロール要素に追加してください。この属性は、コントロールに関連付けられた折りたたみ可能な要素の現在の状態を、スクリーン リーダーや同様の支援技術に明示的に伝えます。折りたたみ可能な要素がデフォルトで閉じられている場合、コントロール要素の属性の値はaria-expanded="false"です。showクラスを使用して折りたたみ可能な要素をデフォルトで開くように設定した場合はaria-expanded="true"、代わりにコントロールに設定します。プラグインは、(JavaScript を介して、またはユーザーが同じ折りたたみ要素に関連付けられている別のコントロール要素をトリガーしたために) 折りたたみ可能な要素が開かれたか閉じられたかに基づいて、コントロールでこの属性を自動的に切り替えます。コントロール要素の HTML 要素がボタンでない場合 (例:<a>または<div>)、属性role="button"要素に追加する必要があります。
コントロール要素が単一の折りたたみ可能な要素をターゲットにしている場合 (つまり、属性がセレクターdata-targetを指している場合)、折りたたみ可能な要素の を含む属性をコントロール要素に追加する必要があります。最新のスクリーン リーダーや同様の支援技術は、この属性を利用して、折りたたみ可能な要素自体に直接移動するための追加のショートカットをユーザーに提供します。idaria-controlsid
Bootstrap の現在の実装は、 WAI-ARIA Authoring Practices 1.1 アコーディオン パターンで説明されているさまざまなキーボード操作をカバーしていないことに注意してください。カスタム JavaScript でこれらを自分で含める必要があります。
崩壊プラグインは、いくつかのクラスを利用して、重労働を処理します。
.collapseコンテンツを非表示にします.collapse.show内容を示します.collapsingトランジションの開始時に追加され、終了時に削除されます
これらのクラスは にあります_transitions.scss。
data-toggle="collapse"要素にとを追加するだけdata-targetで、1 つまたは複数の折りたたみ可能な要素の制御を自動的に割り当てることができます。このdata-target属性は、折りたたみを適用する CSS セレクターを受け入れます。collapse折りたたみ可能な要素にクラスを必ず追加してください。デフォルトで開くようにしたい場合は、追加の class を追加しますshow。
折りたたみ可能な領域にアコーディオンのようなグループ管理を追加するには、 data 属性を追加しますdata-parent="#selector"。実際の動作については、デモを参照してください。
次を使用して手動で有効にします。
$('.collapse').collapse()オプションは、データ属性または JavaScript を介して渡すことができます。data-データ属性の場合、オプション名をのようにに追加しますdata-parent=""。
| 名前 | タイプ | デフォルト | 説明 |
|---|---|---|---|
| 親 | セレクター | jQuery オブジェクト | DOM 要素 | 間違い | 親が指定されている場合、この折りたたみ可能なアイテムが表示されると、指定された親の下にあるすべての折りたたみ可能な要素が閉じられます。(従来のアコーディオンの動作に似ています - これはクラスに依存しますcard)。属性は、ターゲットの折りたたみ可能領域に設定する必要があります。 |
| トグル | ブール値 | 真実 | 呼び出し時に折りたたみ可能な要素を切り替えます |
非同期メソッドと遷移
すべての API メソッドは非同期であり、遷移を開始します。トランジションが開始されるとすぐに呼び出し元に戻りますが、トランジションが終了する前に戻ります。さらに、遷移中のコンポーネントでのメソッド呼び出しは無視されます。
折りたたみ可能な要素としてコンテンツをアクティブにします。オプションのオプションを受け入れますobject。
$('#myCollapsible').collapse({
toggle: false
})折りたたみ可能な要素を表示または非表示に切り替えます。折りたたみ可能な要素が実際に表示または非表示になる前 (つまり、orイベントが発生する前)に呼び出し元に戻ります。shown.bs.collapsehidden.bs.collapse
折りたたみ可能な要素を示します。折りたたみ可能な要素が実際に表示される前 (つまり、イベントが発生する前)に呼び出し元に戻ります。shown.bs.collapse
折りたたみ可能な要素を非表示にします。折りたたみ可能な要素が実際に非表示になる前 (つまり、イベントが発生する前)に呼び出し元に戻ります。hidden.bs.collapse
要素の崩壊を破棄します。
Bootstrap の collapse クラスは、collapse 機能にフックするためのいくつかのイベントを公開します。
| イベントタイプ | 説明 |
|---|---|
| show.bs.collapse | showこのイベントは、インスタンス メソッドが呼び出されるとすぐに発生します。 |
| shown.bs.collapse | このイベントは、折りたたみ要素がユーザーに表示されると発生します (CSS トランジションが完了するのを待ちます)。 |
| hide.bs.collapse | hideこのイベントは、メソッドが呼び出されるとすぐに発生します。 |
| hidden.bs.collapse | このイベントは、折りたたみ要素がユーザーから隠されているときに発生します (CSS トランジションが完了するのを待ちます)。 |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something…
})