在 Microsoft ASP.NET MVC 应用程序中，我尝试实现带有下拉菜单的 Bootstrap NavBar。带有下拉菜单的菜单项不会下拉并显示子菜单项。引用了 bootstrap css 和 js 文件以及 JQuery js 文件。
我正在使用 Bootstrap Navbar 示例，网址为 https://getbootstrap.com/docs/4.2/components/navbar/
页面来源为：
<!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/[email protected]/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-toggle="collapse" data-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-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>© 2024</p>
</footer>
</div>
<script src="/Scripts/jquery-3.4.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
我相信您的导航栏 HTML 代码来自 Bootstrap 4，带有
data-toggledata-target请参阅迁移到 Bootstrap 5 的文档：
所有 JavaScript 插件的数据属性现在都已命名，以帮助区分 Bootstrap 功能与第三方和您自己的代码。例如，我们使用
而不是data-bs-toggle。data-toggle
<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>