イベント Events
ドロップダウンのイベントについて。
構文
構文
on( events, fn )メソッドを使う場合。
$(セレクター).on(イベント, function (e) {
// 処理
});
セレクターでドロップダウンを選択。
イベントは、show.bs.dropdown、shown.bs.dropdown、hide.bs.dropdown、hidden.bs.dropdownの何れかを指定する。
イベント一覧表
| イベント名 | 説明 |
|---|---|
| show.bs.dropdown |
ドロップダウンを開くshowメソッドを呼び出した時のイベント。
ドロップダウン切り替え要素を、イベントの relatedTargetプロパティとして使用可能。
|
| shown.bs.dropdown |
ドロップダウンが完全に表示された時のイベント。
ドロップダウン切り替え要素を、イベントの relatedTargetプロパティとして使用可能。
|
| hide.bs.dropdown |
ドロップダウンを閉じるhideメソッドを呼び出した時のイベント。
ドロップダウン切り替え要素を、イベントの relatedTargetプロパティとして使用可能。
|
| hidden.bs.dropdown |
ドロップダウンが完全に非表示になった時のイベント。
ドロップダウン切り替え要素を、イベントの relatedTargetプロパティとして使用可能。
|
サンプル
サンプル
show.bs.dropdown:
shown.bs.dropdown:
hide.bs.dropdown:
hidden.bs.dropdown:
ソースコード
HTML
<p>show.bs.dropdown: <span id="showBsDropdown"></span></p> <p>shown.bs.dropdown: <span id="shownBsDropdown"></span></p> <p>hide.bs.dropdown: <span id="hideBsDropdown"></span></p> <p>hidden.bs.dropdown: <span id="hiddenBsDropdown"></span></p> <div id="sampleDropdown" class="dropdown"> <button type="button" id="sampleDropdownButton" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-clickbotton="ドロップダウン"> ドロップダウン <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li role="presentation"><a href="#">リンクのリスト１</a></li> <li role="presentation"><a href="#">リンクのリスト２</a></li> <li role="presentation"><a href="#">リンクのリスト３</a></li> </ul> </div>
JavaScript
<script>
$(function () {
$('#sampleDropdown').on('show.bs.dropdown', function (event) {
var clickBotton = $(event.relatedTarget).data('clickbotton');
$('#showBsDropdown').text("「"+clickBotton+"」ボタンをクリックしてshowメソッドを呼び出しましたね。");
$('#hideBsDropdown').text("");
});
$('#sampleDropdown').on('shown.bs.dropdown', function () {
$('#shownBsDropdown').text("ドロップダウンを開きましたね。");
$('#hiddenBsDropdown').text("");
});
$('#sampleDropdown').on('hide.bs.dropdown', function (event) {
$('#hideBsDropdown').text("hideメソッドを呼び出しましたね。");
$('#showBsDropdown').text("");
});
$('#sampleDropdown').on('hidden.bs.dropdown', function (event) {
$('#hiddenBsDropdown').text("ドロップダウンを閉じましたね。");
$('#shownBsDropdown').text("");
});
});
</script>
このJavaScriptコードは、jquery.min.jsを読み込んだ後に配置する必要がある。