0

背景

我的目标是拥有一个带有动画子菜单的 Bootstrap (5) 导航栏/菜单。经过大量研究，我找到了一个似乎可以满足我所需要的解决方案。考虑到可折叠元素可以设置动画，解决方案是使用 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”，然后按 Tab 键进入其中的 3 个选项中的任何一个，然后按“esc”、向上/向下箭头或空格键，它会崩溃并显示以下内容：

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

版本差异

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

我已经使用旧的 CDN 版本（4.1.3，JQuery，并且将“data-bs-”更改为“data-”以与 Bootstrap 4.x 兼容）对此进行了测试，并且在按下任何键。

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

其他信息

测试的引导版本：

  • 5.1.3（已下载）（如上所示的错误）
  • 5.02（通过 CDN 交付）（未捕获的类型错误：无法读取未定义的属性（读取“焦点”）
  • 4.1.3（通过 CDN 交付）- 无错误

我不确定这是否是一个错误，但最终的问题是：使用 Bootstrap 5，我如何使用崩溃但没有崩溃？

4

1 回答 1

0

不是结合下拉和折叠，而是在下拉列表中添加自定义动画。

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

于 2021-10-30T09:33:54.303 回答