ASP.NET MVC电商应用导航栏下拉菜单功能异常求助

我正在开发一款电商应用，尝试在导航栏中实现点击显示、点击外部区域隐藏的下拉菜单，但该下拉菜单功能未按预期工作。

相关代码（_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>

排查修复方案 #

• 移除版本冲突属性：下拉按钮同时存在Bootstrap 4的data-toggle="dropdown"和Bootstrap 5的data-bs-toggle="dropdown"，二者会引发功能冲突。根据你实际使用的Bootstrap版本，保留对应属性即可。
• 确认JS依赖引入：下拉菜单需要Bootstrap JavaScript支持，检查页面是否正确引入了对应版本的Bootstrap JS（Bootstrap 5需额外引入Popper.js）。
• 排查CSS干扰：检查自定义CSS或第三方样式是否覆盖了Bootstrap下拉菜单的默认显示/隐藏规则。
• 自定义外部点击关闭逻辑：若Bootstrap默认的外部点击关闭行为失效，可添加以下JS代码实现该功能：

document.addEventListener('click', function(e) {
  document.querySelectorAll('.dropdown').forEach(dropdown => {
    const toggleBtn = dropdown.querySelector('.dropdown-toggle');
    if (toggleBtn && !dropdown.contains(e.target)) {
      dropdown.classList.remove('show');
      toggleBtn.setAttribute('aria-expanded', 'false');
      dropdown.querySelector('.dropdown-menu')?.classList.remove('show');
    }
  });
});

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