Bootstrap dropdown-menu在div内或动态添加时失效如何解决

• Bootstrap 5 dropdown-menu 组件的触发按钮放在div外层时可正常弹出菜单
• 触发按钮放在div内部、或动态插入页面时，点击无响应，下拉菜单无法正常生效

对应测试代码：

<link rel="stylesheet" href="https://v3dboy.ir/previews/html/frest/frest/assets/vendor/css/rtl/core.css">

<button data-bs-toggle="dropdown">drop down</button>
<div>
  <button type="button" data-bs-toggle="dropdown">drop down in div</button>
</div>

<div class="dropdown-menu">
  <a class="dropdown-item" href="javascript:void(0);">Menu A</a>
  <a class="dropdown-item" href="javascript:void(0);">Menu B</a>
</div>

<div id="dynamicBox">
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

Bootstrap 5 下拉组件的默认自动关联逻辑有两个规则：

1. 触发元素和下拉菜单必须是同级兄弟节点，且二者共同的父元素带有 dropdown 类
2. 如果不满足上述结构，必须通过 data-bs-target 属性显式指定要触发的下拉菜单选择器

上述测试代码里只有最外层的第一个按钮和下拉菜单是直接同级，所以能正常触发；div内的按钮、后续动态添加的按钮都没有满足关联规则，因此无法绑定下拉事件。

静态内容推荐：使用官方标准结构 #

给每组下拉触发按钮+菜单的外层包裹 class="dropdown" 的容器，无论按钮嵌套在容器内多少层div都能正常识别：

<!-- 第一组下拉 -->
<div class="dropdown">
  <button data-bs-toggle="dropdown">drop down</button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="javascript:void(0);">Menu A</a>
    <a class="dropdown-item" href="javascript:void(0);">Menu B</a>
  </div>
</div>

<!-- 第二组：按钮嵌套在div内也可正常工作 -->
<div class="dropdown">
  <div>
    <button type="button" data-bs-toggle="dropdown">drop down in div</button>
  </div>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="javascript:void(0);">Menu A</a>
    <a class="dropdown-item" href="javascript:void(0);">Menu B</a>
  </div>
</div>

动态/跨层级场景：显式绑定目标 #

给触发按钮加 data-bs-target 属性，值为对应下拉菜单的选择器，不需要严格DOM结构即可关联：

<button data-bs-toggle="dropdown" data-bs-target="#sharedDropdown">外层按钮</button>
<div>
  <button type="button" data-bs-toggle="dropdown" data-bs-target="#sharedDropdown">div内按钮</button>
</div>

<div class="dropdown-menu" id="sharedDropdown">
  <a class="dropdown-item" href="javascript:void(0);">Menu A</a>
  <a class="dropdown-item" href="javascript:void(0);">Menu B</a>
</div>

动态插入的触发按钮只要带上对应 data-bs-toggle="dropdown" 和 data-bs-target 属性，插入DOM后即可直接生效；如果是动态生成的全新下拉组件，也可以在元素插入后手动初始化：

// 元素插入DOM后执行
document.querySelectorAll('[data-bs-toggle="dropdown"]').forEach(el => {
  // 避免重复初始化
  if (!bootstrap.Dropdown.getInstance(el)) {
    new bootstrap.Dropdown(el)
  }
})

内容的提问来源于stack exchange，提问作者مهدی نبوی