Bootstrap 5：如何使用另一个按钮正确切换下拉菜单

Question

所以我有一个下拉菜单，旁边有一个按钮。目的是让按钮打开和关闭下拉菜单，点击下拉框中的文字也应该打开和关闭菜单。

我一直在尝试将此 post 中的工作 Bootstrap 3 代码改编为 Bootstrap 5 但无法使其完全正常工作，因为我愿意。任何帮助都将不胜感激。

我的代码如下：

<div class="btn-group">
  <a id="test-dropdown-btn" class="btn dropdown-toggle" data-bs-toggle="dropdown">Select Category</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item">All Categories</a></li>
      <li><a class="dropdown-item">Categoty One</a></li>
      <li><a class="dropdown-item">Categoty Two</a></li>
      <li><a class="dropdown-item">Categoty Three</a></li>
      <li><a class="dropdown-item">Categoty Four</a></li>
      <li><a class="dropdown-item">Categoty Five</a></li>
    </ul>
</div>

 <a id="test-btn" class="btn btn-primary" data-bs-toggle="dropdown" data-bs-target=".btn-group">&#9660</a>

jsfiddle 在这里：https://jsfiddle.net/Ernesto1/gefvd0s1/17/

Answer 1

在 Bootstrap 5 中，您无法再使用数据属性从另一个元素切换下拉列表。但是，可以使用 JavaScript...

来完成

let trigger = document.getElementById('test-dropdown-btn')
document.getElementById('test-btn').addEventListener("click", (e)=>{
    bootstrap.Dropdown.getOrCreateInstance(trigger).toggle()
})

Demo

注意：auto-close 选项必须设置为 false 才能生效。

Bootstrap 5：如何使用另一个按钮正确切换下拉菜单

Bootstrap 5: How to properly toggle dropdown with another button

dropdown

bootstrap-5