MVC5项目中Bootstrap5下拉菜单不生效问题排查

现存问题汇总 #

• 脚本加载存在重复、顺序错误
  1. jQuery 重复加载：~/bundles/jquery-ui 包内额外引入了低版本 jquery-1.9.1.min.js，会覆盖全局加载的高版本jQuery，导致后续依赖高版本jQuery的插件绑定失效。
  2. Bootstrap 脚本重复加载：BundleConfig 中注册了 bootstrap.js，视图内又同时引入 bootstrap.bundle.min.js 和 bootstrap.min.js，重复初始化组件会导致事件绑定冲突。bootstrap.bundle.min.js 已经内置了Popper依赖，无需额外引入其他Bootstrap核心脚本。
  3. 版本不匹配：如果项目中混用Bootstrap3/4/5的CSS和JS文件，会出现API无法对应、样式错乱的问题。
• 组件写法不符合Bootstrap5规范
  1. 触发属性错误：Bootstrap5将所有组件的data-*触发属性统一增加bs前缀，旧版data-toggle="dropdown"无法被BS5识别，需改为data-bs-toggle="dropdown"。
  2. 结构缺失：下拉按钮和下拉菜单必须被class为dropdown的父容器包裹，当前代码中两个元素平级，无法完成定位和事件委托。
  3. 类名错误：按钮使用了自定义类button，缺少Bootstrap要求的基础btn类；BS5中.dropdown-toggle类已内置下拉箭头样式，旧版的<span class="caret">已被废弃，无需额外添加。

分步修复方案 #

1. 修正BundleConfig配置，移除重复引用、统一脚本版本

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
            "~/Scripts/jquery.validate*",
            "~/Scripts/messages_ru.js",
            "~/Scripts/methods_ru.js",
            "~/Scripts/jquery.options.validate.js"
        ));

        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        // BS5 仅保留bundle版本，内置Popper依赖，无需额外引入bootstrap.js
        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.bundle.min.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
             "~/Content/css/Styles.css",
             "~/Content/bootstrap.min.css", // 确认该文件为Bootstrap5版本
             "~/Content/site.css",
             "~/Content/newStyle.css"
         ));

        bundles.Add(new ScriptBundle("~/bundles/jquery-ui").Include(
            "~/Scripts/jquery-ui-1.11.4.js",
            // 移除此处重复引入的低版本jQuery
            "~/Scripts/jquery.maskedinput.min.js",
            "~/Scripts/jquery.maskedinput.add.js",
            "~/Scripts/select2.js",
            "~/Scripts/jquery.multiple.select.js",
            "~/Scripts/jquery-ui.datepicker.add.js"
        ));
    }
}

2. 修正下拉组件HTML结构，适配BS5语法

<!-- 必须添加dropdown父容器 -->
<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Button_1
    </button>
    <ul class="dropdown-menu">
        @foreach (var type in Enum.GetValues(typeof(REPORT_TYPE)).Cast<REPORT_TYPE>())
        {
            <li><a class="dropdown-item" href="#">@type.GetDescription()</a></li>
        }
    </ul>
</div>

3. 统一视图脚本加载顺序，移除重复引入
   删除视图内手动写的Bootstrap脚本标签，通过Bundle统一按顺序渲染脚本，保证加载顺序为：jQuery基础库 -> 依赖jQuery的插件（jquery-ui、验证插件等） -> Bootstrap脚本，参考写法：

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jquery-ui")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/bootstrap")

注意：Bootstrap5本身不依赖jQuery，但项目中使用了多款jQuery插件，必须严格保证jQuery在所有jQuery插件、Bootstrap脚本之前加载，禁止重复加载任意版本的jQuery或Bootstrap脚本，避免全局对象被覆盖导致功能失效。

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