bootstrap4.css
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
color: #fff;
background-color: #0062cc;
border-color: #005cbf;
}
bootstrap4.css
.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}
■ドロップダウン:dropdown-menu:js:ドロップダウンメニューのイベント
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownExample" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sale!</button>
<div class="dropdown-menu" aria-labelledby="dropdownExample">
<a class="dropdown-item" href="#">メニュー01</a>
<a class="dropdown-item" href="#">メニュー02</a>
<a class="dropdown-item" href="#">メニュー03</a>
</div>
</div>
<script>
$(function() {
$(".dropdown").on("show.bs.dropdown", function(event) {
var x = $(event.relatedTarget).text(); // ボタンのテキストを取得
alert(x + '無くなり次第終了!');
});
});
</script>
■ドロップダウン:dropdown-menu:js:用意されている メソッド:dropdpown('toggle') →最初から選択肢を出しておく
<!-- ドロップダウン -->
<div class="dropdown">
<!-- 切り替えボタン -->
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownExample" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ドロップダウン
</button>
<!-- メニュー -->
<div class="dropdown-menu" aria-labelledby="dropdownExample">
<a class="dropdown-item" href="#">メニュー01</a>
<a class="dropdown-item" href="#">メニュー02</a>
<a class="dropdown-item" href="#">メニュー03</a>
</div>
</div>
<script>
$(function(){
$('#dropdownExample').dropdown('toggle');
});
</script>