ㄧ.Dropdown:方法與事件

<div class="component" id="demo">
  <div id="dropdown-demo" class="btn-group dropup" style="position: absolute; bottom: 30%;">
   .......
  </div>
</div>


.demo.component{
  padding: 50px;
}

js部分：

$('#dropdown-demo').on('show.bs.dropdown', ()=>{
  console.log('show');
});
$('#dropdown-demo').on('shown.bs.dropdown', ()=>{
  console.log('shown');
});
$('#dropdown-demo').on('hide.bs.dropdown', ()=>{
  console.log('hide');
});
$('#dropdown-demo').on('hidden.bs.dropdown', ()=>{
  console.log('hidden');
});

重點：

1.在Dropdown的父元素添加#dropdown-demo
2.show.bs.dropdown這個事件在調用顯示時被立即觸發。
3.shown.bs.dropdown當這個物件可被看見時會觸發此事件(當完成 CSS 轉換後)。
4.hide.bs.dropdown這個事件在調用隱藏時被立即觸發。
5.hidden.bs.dropdown當這個物件隱藏後會觸發此事件(當完成 CSS 轉換後)。

codepen
參考：bootstrap4