WordPress集成Bootstrap 5时Dropdown Menu点击无法下拉问题

问题表现 #

• 点击下拉触发按钮无交互响应，无法自动展开下拉菜单
• 手动给带有dropdown-menu类的元素添加show类时，菜单可正常显示

当前环境代码 #

已引入的Bootstrap 5资源 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

现有下拉菜单组件代码 #

<li id="menu-item-9365" class="has-mega-menu menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown nav-item nav-item-9365" has-megamenu="">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" id="dropdownMenuLink" role="button">Shop</a>
<div class="dropdown-menu megamenu" role="menu" aria-labelledby="dropdownMenuLink">
            <div class="row">
                <div class="col-lg-8 col-12">
                   DROPDOWN MENU ITEMS HERE
                </div><!-- end col-4 -->
            </div><!-- end row --> 
        </div> <!-- dropdown-mega-menu.// -->
</li>

故障原因与解决方案 #

按排查优先级从高到低排序：

• Bootstrap JS加载异常/资源重复冲突
  排查方式：打开浏览器开发者工具控制台，输入typeof bootstrap执行，如果返回undefined，说明Bootstrap JS未成功加载，检查路径、integrity校验值是否匹配、是否被广告拦截/安全插件拦截了CDN资源。
  如果控制台返回object，检查页面源码是否被主题、其他插件重复引入了其他版本的Bootstrap JS（比如v3/v4版本、其他5.x小版本），重复加载会覆盖全局bootstrap对象导致事件绑定失效，保留唯一版本的Bootstrap CSS和JS即可。
  确认bootstrap.bundle.min.js的引入位置在DOM元素渲染完成之后（建议放在</body>标签前），不需要额外单独引入Popper.js，bundle版本已经内置了下拉组件所需的Popper依赖。
• WordPress主题/插件自定义脚本拦截了点击事件
  绝大多数WordPress导航类主题、mega menu插件都会自带自定义的下拉交互逻辑，这类脚本通常会在下拉按钮上绑定点击事件，执行event.stopPropagation()或者event.preventDefault()阻断Bootstrap默认的组件触发逻辑。
  快速修复方式：在DOM加载完成后，清除冲突事件并重新初始化Bootstrap下拉组件，将以下代码加入主题自定义JS文件中：

  document.addEventListener('DOMContentLoaded', () => {
    // 克隆节点移除所有已绑定的冲突事件
    document.querySelectorAll('.dropdown-toggle').forEach(toggle => {
      toggle.replaceWith(toggle.cloneNode(true))
    })
    // 重新初始化所有Bootstrap下拉组件
    document.querySelectorAll('.dropdown-toggle').forEach(toggleEl => {
      new bootstrap.Dropdown(toggleEl)
    })
  })
  

  如果站点使用jQuery，可以额外加一句事件解绑逻辑适配老主题：

  jQuery('.dropdown-toggle').off('click')
  

• Beta版本Bootstrap自身bug
  当前使用的5.2.0-beta1是测试预览版本，该版本存在部分下拉组件事件委托的已知兼容问题，建议替换为同系列正式稳定版资源，注意CSS和JS版本必须完全对应，禁止混版本加载。
• 父容器样式阻断（低概率）
  检查导航栏所有父级容器是否被设置了overflow: hidden样式，这类样式会导致下拉菜单即使加了show类也被裁切，由于手动加show类可以正常显示，该问题优先级最低，仅在前述方案都无效时排查。

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