Bootstrap 5 Dropdown的autoClose配置通过JavaScript不生效问题

问题根源 #

• 绑定目标错误：你把Dropdown实例绑定到了.dropdown-menu元素上，但Bootstrap要求必须绑定到下拉触发元素（如按钮），而非菜单本身。
• HTML结构不规范：缺少Bootstrap下拉菜单必需的结构：
  • 外层容器需添加.dropdown类
  • 要有带.dropdown-toggle类的触发按钮，且需设置data-bs-toggle="dropdown"属性

修正后的代码 #

HTML结构 #

<div class="dropdown">
  <!-- 下拉触发按钮 -->
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
    下拉菜单
  </button>
  <!-- 下拉菜单容器 -->
  <div class="dropdown-menu p-4">
    <!-- 菜单内容 -->
    <p>菜单内容示例</p>
  </div>
</div>

JavaScript代码 #

// 绑定到触发按钮而非菜单元素
const dropdown = new bootstrap.Dropdown(document.querySelector('.dropdown-toggle'), {
  autoClose: true
})
// 切换菜单显示状态
dropdown.toggle()

额外说明 #

• autoClose: true是Bootstrap 5的默认配置，若无需自定义可省略该参数
• 确保已正确引入Bootstrap 5的CSS与JS文件

内容的提问来源于stack exchange，提问作者Ali