34.Bootstrap(中文教程)元件：Dropdown:方法与事件

ㄧ.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