Bootstrap 5 按键时出现下拉和折叠错误

Question

背景

我的目标是拥有一个带有动画子菜单的 Bootstrap (5) 导航 bar/menu。经过大量研究，我找到了一个似乎可以满足我需要的解决方案。解决方案是使用 data-bs-toggle="collapse" 而不是 'dropdown' ，因为可以对可折叠元素进行动画处理。假设我有以下标记（仅显示相关标记）...

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-menu" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Menu control">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="navbar-collapse collapse" id="nav-menu">
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="dropdown-anchor" role="button" data-bs-toggle="collapse" data-bs-target="#dropdown" aria-haspopup="true" aria-expanded="false">
          Foo
        </a>
        <div class="dropdown-menu collapse" aria-labelledby="dropdown-anchor" id="dropdown">
          <a class="dropdown-item" href="#">Foo</a>
          <a class="dropdown-item" href="#">Bar</a>
          <a class="dropdown-item" href="#">Foobar</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

问题

我已经链接到 Bootstrap css 并加载了完整的 Boostrap Javascript 包。一切似乎工作正常。但是，如果您打开主菜单和下拉菜单 'foo'，然后切换到其中的 3 个选项中的任何一个，然后按 Esc、Up/向下 箭头或 Space-bar，它崩溃并显示以下内容：

bootstrap.bundle.js:1041 Uncaught TypeError: Cannot read properties of undefined (reading 'nextElementSibling')

版本差异

有趣的是，下载的 bootstrap JS 包（我在这里使用的是 5.1.3）和从 CDN 获得的包（目前是 5.0.2）之间的错误是不同的。

我已经用旧的 CDN 版本（4.1.3，JQuery，并将 'data-bs-' 更改为 'data-' 以兼容 Bootstrap 4.x) 并且按任何键都没有这样的错误。

在我的项目中，我正在添加自己的处理程序以使用键盘关闭可折叠等，因此我真的很希望能够摆脱这个错误。

其他信息

Bootstrap 个测试版本：

5.1.3（已下载）（如上所示错误）
5.02（通过 CDN 交付）（未捕获类型错误：无法读取未定义的属性（读取 'focus'）
4.1.3（通过 CDN 交付）- 没有错误

我不确定这是不是一个错误，但最终的问题是：使用 Bootstrap 5 我怎样才能使用崩溃来实现此目的而不发生崩溃？

Answer 1

不是组合下拉菜单和折叠，而是向下拉菜单添加自定义动画。

根据按钮上的 show class 从 0 到 100 缩放下拉列表。这里，参考这个：https://jsfiddle.net/69uzmrob/1/

Bootstrap 5 按键时出现下拉和折叠错误

Bootstrap 5 Dropdown and Collapse Error on Keypress

javascript

drop-down-menu

dropdown

bootstrap-5

react-bootstrap-nav

背景

问题

版本差异

其他信息