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" 。
JavaScriptを介して、
手動で有効にします。
$('.collapse').collapse()折りたたみオプション
オプションは、データ属性またはJavaScriptを介して渡すことができます。 データ属性については、のように、データーにオプション名を追加し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";
} »それを自分で試してみてください