点击按钮编程关闭Bootstrap 5下拉菜单报错：dropdown不是函数

云原生阿岚

2026-6-19

问题分析与解决方案

错误dropDownButton.dropdown is not a function的核心原因是：你用了Bootstrap 4及之前的jQuery式调用方法，但Bootstrap 5已经完全改用原生JavaScript实现组件，不再支持通过DOM元素直接调用.dropdown()这类jQuery方法。

正确的实现方式

Bootstrap 5的下拉菜单组件需要通过官方提供的Dropdown类实例来操作，具体步骤如下：

获取下拉按钮的DOM元素
通过bootstrap.Dropdown.getOrCreateInstance()获取已存在的下拉实例（避免重复创建实例）
调用实例的hide()方法关闭下拉菜单

代码示例

HTML结构（参考）

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="filterDropdownBtn" 
          data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    筛选菜单
  </button>
  <div class="dropdown-menu" aria-labelledby="filterDropdownBtn">
    <!-- 带标签的复选框 -->
    <div class="dropdown-item px-3">
      <input type="checkbox" id="tag1">
      <label class="ms-2" for="tag1">标签1</label>
    </div>
    <!-- 操作按钮 -->
    <div class="dropdown-divider"></div>
    <div class="px-3 py-2">
      <button type="button" class="btn btn-sm btn-primary" onclick="closeFilter()">应用</button>
      <button type="button" class="btn btn-sm btn-outline-secondary ms-2" onclick="closeFilter()">重置</button>
    </div>
  </div>
</div>

JavaScript函数

function closeFilter() {
  // 获取下拉按钮元素
  const dropdownBtn = document.getElementById('filterDropdownBtn');
  // 获取或创建下拉菜单实例
  const dropdownInstance = bootstrap.Dropdown.getOrCreateInstance(dropdownBtn);
  // 关闭下拉菜单
  dropdownInstance.hide();
}