Keypress 上的 Bootstrap 5 下拉和折疊錯誤

Question

背景

我的目標是擁有一個帶有動畫子菜單的 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”，然后選擇其中的 3 個選項中的任何一個並按“esc”、向上/向下箭頭或空格鍵，它會崩潰並顯示以下內容：

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，為了與 Bootstrap 4.x 兼容而將“data-bs-”更改為“data-”）對此進行了測試，並且在按下任何鍵。

在我的項目中，我添加了我自己的處理程序來使用鍵盤關閉可折疊等，所以我真的很想能夠擺脫這個錯誤。

其他信息

測試的引導程序版本：

• 5.1.3（已下載）（錯誤如上）
• 5.02（通過 CDN 交付）（未捕獲的類型錯誤：無法讀取未定義的屬性（正在讀取“焦點”）
• 4.1.3（通過 CDN 交付）- 沒有錯誤

我不確定這是一個錯誤，但最終，問題是：使用 Bootstrap 5，我如何使用折疊實現這一點，但不會崩潰？

Answer 1

不是將下拉菜單和折疊相結合，而是在下拉菜單中添加自定義動畫。

ScaleY 下拉菜單從 0 到 100，具體取決於按鈕上的show類。 這里，參考這個： https : //jsfiddle.net/69uzmrob/1/