Bootstrap3
日本語リファレンス

広告

イベント  Events


コラップスcollapse.jsのイベントについて。


構文

on( events, fn )メソッドを使う場合。

$( セレクター ).on( イベント, function () {
	// 処理
} );

セレクターで開閉式コンテンツを選択。

イベントに指定できるのは、show.bs.collapseshown.bs.collapsehide.bs.collapsehidden.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を読み込んだ後に配置する必要がある。


広告