在 Bootstrap 中使用 show.bs.dropdown 的过程[关闭]

Question

点击下拉菜单时使用show.bs.dropdown事件的流程是什么？

例子：

当我点击下拉展开时，需要运行代码：

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

Answer 1

引导程序 5（2021 年更新）

Bootstrap 下拉 show 事件由下拉切换 (data-bs-toggle="dropdown") 元素触发。另外，不再需要jquery，所以可以使用vanilla JS...

var theDropdown = document.getElementById('dropdownMenuLink')
theDropdown.addEventListener('show.bs.dropdown', function () {
     alert('hi');
})

theDropdown.addEventListener('hide.bs.dropdown', function () {
     alert('bye');
})

https://codeply.com/p/mbImPQWhI4

---

引导程序 4

与 Bootstrap 3 一样。Bootstrap 4 下拉事件绑定到下拉列表的父元素。

https://codeply.com/go/vObdBWFwnL

---

引导程序 3

Bootstrap 下拉列表show 事件与下拉列表的父元素相关联。例如，注意id=myDropdown..

<div class="btn-group" id="myDropdown">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Menu
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#">Choice1</a></li>
    <li><a href="#">Choice2</a></li>
    <li><a href="#">Choice3</a></li>
    <li class="divider"></li>
    <li><a href="#">Choice..</a></li>
  </ul>
</div>

由这个事件处理..

$('#myDropdown').on('show.bs.dropdown', function () {
  alert('hello');
})

演示：https://codeply.com/p/rHEGwyvuwx