ASP.NET MVC中Bootstrap导航栏下拉菜单无法展开问题

问题根源 #

你参考的是Bootstrap 4.2的导航栏示例，但实际引入的是Bootstrap 5.3.2版本的资源。两个版本的下拉组件触发属性不兼容：Bootstrap 5把原有的data-toggle、data-target属性前缀改成了data-bs-，导致旧属性无法触发下拉逻辑。

具体修改步骤 #

• 导航栏折叠按钮：把data-toggle="collapse"改成data-bs-toggle="collapse"，data-target="#navbarNavDropdown"改成data-bs-target="#navbarNavDropdown"
• 下拉菜单触发链接：把data-toggle="dropdown"改成data-bs-toggle="dropdown"

另外，Bootstrap 5已经不再依赖jQuery，如果你没有其他代码需要用到jQuery，可以移除jquery-3.4.1.js的引入，减少不必要的资源加载。

修正后的完整代码 #

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Home Page - Test</title>
        <script src="/Scripts/modernizr-2.8.3.js"></script>            
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <a class="navbar-brand" href="/Home/Index">App</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="/Home/Index">Home</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLinkSearch" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Search</a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLinkSearch">
                            <a class="dropdown-item" href="/Home/Search1">Search1</a>
                            <a class="dropdown-item" href="/Home/Search2">Search2</a>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>
        <div class="container body-content">
            <main>
                <section class="row" aria-labelledby="aspnetTitle">
                    <h1 id="title">Test</h1>
                </section>
            </main>
            <hr />
            <footer>
                <p>&copy; 2024</p>
            </footer>
        </div>    
        <!-- 若无需jQuery可移除以下行 -->
        <script src="/Scripts/jquery-3.4.1.js"></script>
        <script type="text/javascript" language="javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>        
    </body>
</html>

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