导航栏下拉菜单在 asp.net mvc 上不起作用

Question

我正在尝试在导航栏中实现一个下拉菜单，该菜单应在用户单击时显示，并在单击我正在制作的电子商务应用程序外部的任何位置时消失，但下拉菜单 function 未按预期工作。

_layout.cshtml

<header>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
        <div class="container-fluid">
            <a class="navbar-brand" asp-controller="Movies" asp-action="Index">eMovies</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                <ul class="navbar-nav flex-grow-1">
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-controller="Movies" asp-action="Index"><i class="badge-info bi-film"></i> Movies</a>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="badge-info bi-gear"></i> Management
                        </a>

                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" asp-controller="Cinemas" asp-action="Index"><i class="bi bi-camera-reels"></i> Cinemas</a>
                            <a class="dropdown-item" asp-controller="Producers" asp-action="Index"><i class="bi bi-headset"></i> Producers</a>
                            <a class="dropdown-item" asp-controller="Actors" asp-action="Index"><i class="bi bi-person-square"></i> Actors</a>
                        </div>
                    </li>
                </ul>

                <!-- etc -->

            </div>
        </div>
    </nav>
</header>

这是我的 github 存储库供项目参考，从 eMovies/Views/Shared/_layout.cshtml 获取 go 以上的代码

https://github.com/johnvillasenor/ecommerce-aspnet-mvc-app

非常感谢您的帮助:)

Answer 1

必须正确引用 bootsrap 并确保您使用的是最新版本的 bootsrap css 和 js。

最新编译的 CSS 和 javascript（boostrap 5.2 应该也可以）：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>