bootstrap 5 不会抛出 show.bs.dropdown 和 hide.bs.dropdown 事件答案

【问题标题】：bootstrap 5 does not throw the show.bs.dropdown and hide.bs.dropdown eventsbootstrap 5 不会抛出 show.bs.dropdown 和 hide.bs.dropdown 事件
【发布时间】：2021-09-18 19:21:30
【问题描述】：

我在 webpack4+bootstrap 5 的捆绑包上创建一个网站，我需要在菜单的下拉菜单中添加动画。在互联网上，他们建议这样做：

     $('.dropdown').on('show.bs.dropdown', function() {
       $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
    });

    $('.dropdown').on('hide.bs.dropdown', function() {
      $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
    });

但由于某种原因，事件没有被拦截。 HTML代码如下：

. . .
<li class="nav-item dropdown">
  <a class="nav-link menu_level_1 dropdown-toggle" data-bs-toggle="dropdown" href=""
    id="nav_link_3" role="button" aria-expanded="false">
    Каталог
  </a>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="nav_link_3">
    . . .
  </ul>
</li>
. . .

也许有人可以告诉我我做错了什么？谢谢。

【问题讨论】：

你在使用 jQuery 吗？
是的，但我也试过 querySelectorAll / addEventListener - 结果是一样的

标签： bootstrap-5

【解决方案1】：

事件由切换元素触发，而不是下拉父元素..，

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

【讨论】：

谢谢，它有效。我刚刚从描述中了解到，事件需要绑定到父对象。事实证明不是这样的
$(document).ready(function () { document.querySelectorAll('.dropdown-toggle').forEach((el) => { el.addEventListener('show.bs.dropdown' , function () { $(this).parent().find('.dropdown-menu').first().stop(true, true).slideDown(); }) el.addEventListener('hide.bs. dropdown', function (ev) { $(this).parent().find('.dropdown-menu').first().stop(true, true).slideUp(); }) }) })跨度>