Bootstrap 5.0.1下拉菜单和汉堡菜单点击无法展开是什么原因？

核心问题定位 #

你遇到的问题是Bootstrap 5 与 Bootstrap 4 的数据属性不兼容，同时functions.php中存在脚本声明不规范的问题：

• Bootstrap 5 为所有交互组件的自定义 data 属性新增了bs命名空间，你当前使用的data-toggle="dropdown"是 Bootstrap 4 的语法，无法触发 Bootstrap 5 的交互逻辑
• 脚本注册时未显式声明依赖，且存在多余的钩子注册代码，可能导致加载顺序异常

分步修复操作 #

1. 修改HTML交互属性 #

将所有 Bootstrap 交互组件的 data 属性替换为带bs前缀的新版语法，以下是下拉菜单的修正示例：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

如果是汉堡菜单，同步将data-toggle="collapse"修改为data-bs-toggle="collapse"，data-target修改为data-bs-target即可。 #

2. 修正functions.php资源加载代码 #

删除多余的钩子注册代码，显式声明Bootstrap脚本对jQuery的依赖，修正后的代码如下：

<?php

function loadStylesheets(){

    wp_register_style('bootstrap',get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css', array(), '5.0.1', 'all');
    wp_enqueue_style('bootstrap');

    wp_register_style('mainStyle',get_template_directory_uri() . '/style.css', array(), false, 'all');
    wp_enqueue_style('mainStyle');

    wp_register_style('fontStyle',get_template_directory_uri() . '/fonts.css', array(), false, 'all');
    wp_enqueue_style('fontStyle');

    wp_register_style('colorStyle',get_template_directory_uri() . '/customColors.css', array(), false, 'all');
    wp_enqueue_style('colorStyle');

}
add_action('wp_enqueue_scripts', 'loadStylesheets');


function includeJquery(){
    wp_deregister_script('jquery');
    wp_enqueue_script('jquery', get_template_directory_uri() . '/scripts/jquery-3.6.0.min.js', array(), '3.6.0', true);
    // 移除多余的add_action代码
}
add_action('wp_enqueue_scripts', 'includeJquery');


function loadJS(){
    // 第二个参数传入array('jquery')显式声明依赖，保证jQuery先加载完成
    wp_register_script('bootstrapJS',get_template_directory_uri() . '/bootstrap/js/bootstrap.bundle.min.js', array('jquery'), '5.0.1', true);
    wp_enqueue_script('bootstrapJS');

    wp_register_script('mainScripts',get_template_directory_uri() . '/scripts/scripts.js', array('jquery'), false, true);
    wp_enqueue_script('mainScripts');

}
add_action('wp_enqueue_scripts', 'loadJS');

3. 可选排查项 #

如果修改后仍无法正常工作，按以下顺序排查：

• 确认本地Bootstrap CSS和JS文件版本完全一致，避免跨版本兼容问题
• 打开浏览器开发者工具的控制台，检查是否存在jQuery加载失败、JS报错、资源404等问题
• 临时注释自定义的scripts.js脚本，排查是否存在自定义JS阻止了Bootstrap事件冒泡的情况

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