イベント Events
コラップスcollapse.jsのイベントについて。
構文
構文
on( events, fn )メソッドを使う場合。
$( セレクター ).on( イベント, function () {
// 処理
} );
セレクターで開閉式コンテンツを選択。
イベントに指定できるのは、show.bs.collapse、shown.bs.collapse、hide.bs.collapse、hidden.bs.collapse。
イベント一覧表
| イベント名 | 説明 |
|---|---|
| show.bs.collapse |
開閉式コンテンツを開くshowメソッドを呼び出した時のイベント。 |
| shown.bs.collapse |
開閉式コンテンツを開いた時のイベント。 |
| hide.bs.collapse |
開閉式コンテンツを閉じるhideメソッドを呼び出した時のイベント。 |
| hidden.bs.collapse |
開閉式コンテンツを閉じた時のイベント。 |
サンプル
サンプル
show.bs.collapse:
shown.bs.collapse:
hide.bs.collapse:
hidden.bs.collapse:
表示したり、折り畳んだりできるコンテンツ。
ソースコード
HTML
<p>show.bs.collapse: <span id="showBsCollapse"></span></p> <p>shown.bs.collapse: <span id="shownBsCollapse"></span></p> <p>hide.bs.collapse: <span id="hideBsCollapse"></span></p> <p>hidden.bs.collapse: <span id="hiddenBsCollapse"></span></p> <p> <button type="button" class="btn btn-default" data-toggle="collapse" data-target="#sampleCollapse"> 表示／非表示 </button> </p> <div class="collapse" id="sampleCollapse"> <div class="well"> 表示したり、折り畳んだりできるコンテンツ。 </div> </div>
JavaScript
$(function () {
$('#sampleCollapse').on('show.bs.collapse', function () {
$('#showBsCollapse').text("showメソッドを呼び出しましたね。");
$('#hideBsCollapse').text("");
});
$('#sampleCollapse').on('shown.bs.collapse', function () {
$('#shownBsCollapse').text("表示しました。");
$('#hiddenBsCollapse').text("");
});
$('#sampleCollapse').on('hide.bs.collapse', function () {
$('#hideBsCollapse').text("hideメソッドを呼び出しましたね。");
$('#showBsCollapse').text("");
});
$('#sampleCollapse').on('hidden.bs.collapse', function () {
$('#hiddenBsCollapse').text("非表示にしました。");
$('#shownBsCollapse').text("");
});
});
このJavaScriptコードは、jquery.min.jsを読み込んだ後に配置する必要がある。