.NET6 MVC应用Razor页面中Bootstrap下拉菜单无法正常工作

1. 核对Bootstrap JS的加载顺序和位置 #

Bootstrap 5的下拉组件依赖内置的Popper.js，必须保证脚本加载顺序正确，且在DOM加载完成后执行。在MVC的_Layout.cshtml里，脚本引用顺序需遵循：

<script src="~/lib/jquery/jquery.min.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.bundle.min.js"></script>

若使用单独的bootstrap.min.js，需额外引入Popper.js，否则下拉功能会失效。

2. 检查浏览器控制台的JS报错 #

按F12打开开发者工具，切换到Console标签查看红色报错：

• 出现$ is not defined：说明jQuery未加载或加载顺序错误
• 出现bootstrap is not defined：说明Bootstrap JS未成功加载
• 出现元素找不到类报错：大概率是脚本在DOM未加载完成时就已执行

3. 确认Bootstrap版本对应的属性名 #

你的代码中使用data-bs-toggle="dropdown"是Bootstrap 5的写法，若项目安装的是Bootstrap 4，需改为data-toggle="dropdown"（少了-bs后缀）。另外你的触发元素id与下拉菜单的aria-labelledby匹配，这部分无问题。

4. 排查自定义脚本对默认事件的阻止 #

部分MVC项目会写全局脚本阻止a标签默认行为，比如：

$('a').click(function(e) {
    e.preventDefault();
    // 其他业务逻辑
});

这种情况会直接导致Bootstrap下拉触发失效。解决方法是给下拉触发的a标签添加专属类（比如dropdown-trigger），再修改脚本排除该类：

$('a:not(.dropdown-trigger)').click(function(e) {
    e.preventDefault();
    // 其他业务逻辑
});

5. 手动初始化下拉菜单 #

若自动初始化失效，可在页面底部添加手动初始化脚本：

document.addEventListener('DOMContentLoaded', function() {
    const dropdowns = document.querySelectorAll('.dropdown-toggle');
    dropdowns.forEach(el => new bootstrap.Dropdown(el));
});

用jQuery的话也可以这么写：

$(document).ready(function() {
    $('.dropdown-toggle').dropdown();
});

6. 验证布局页的RenderSection配置 #

如果视图使用了布局页，需将页面专属脚本放在@RenderSection("Scripts", required: false)中，确保脚本在Bootstrap JS之后加载，避免Bootstrap未加载就执行初始化。示例：

@section Scripts {
    <script>
        // 手动初始化代码放在这里
    </script>
}

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