我已经从 bootstrap 复制粘贴了一个导航栏: https://getbootstrap.com/docs/4.3/components/navbar/
当我将此代码粘贴到我的元素中时，导航栏可以正常工作，除非我将浏览器缩小到移动大小并单击汉堡菜单。当我点击菜单时，我的全部出现，但之后它们很快就消失了。我还必须单击汉堡菜单两次才能显示 anchor 标记。同样的事情也发生在我创建的导航栏上，我将在下面发布。
我的代码:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<img id="navbarLogo" src="img/Home/Crunchsoft.techSignature.png">
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbar"
aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbar">
<div id="navbar-items" class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Services</a>
<a class="nav-item nav-link" href="#">Contact</a>
<a class="nav-item nav-link" href="#">About</a>
</div>
</div>
</nav>
我的 _Host.cshtml:
@page "/"
@namespace Crunchsoft.techWebsite.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Crunchsoft.techWebsite</title>
<base href="~/" />
@*custom css*@
<link href="css/index.css" rel="stylesheet" />
<!-- bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
@*Animation*@
<link href="assets/animate.css" rel="stylesheet" />
</head>
<body>
<app>
@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
我曾尝试将脚本放在页面底部，并将 Bootstrap 放在我的 head 标签的不同位置，但都无济于事。
我已经看过很多其他的 stackoverflow 解决方案:
Bootstrap dropdown disappears after clicking it
Bootstrap 4 Toggle Checkbox within Dropdown menu
Keep Bootstrap dropdown open on click
并且无法从中得出对我有用的答案。
更令人沮丧的是，当我在 fiddle 中创建我的导航栏时，它起作用了。
https://jsfiddle.net/MaxTaylor/6rftaw3o/1/
编辑: 我已经尝试注释掉除 bootstrap 之外的所有样式表，但我仍然遇到这个问题。我正在使用 Blazor .AspNetCore。我使用 Visual Studio Code 尝试了同样的事情并且它有效，但仍然无法在我的 Blazor 元素中工作。
最佳答案
当我们在 blazor 元素中使用 bootstrap 时，我们必须做很多调整，以便 bootstrap javascript 顺利运行。
对我来说，如果在 blazor 元素中，除了需要我访问 javascript API 的不同情况外，我更愿意避免在 C# 仍然可以完成的情况下使用 javascript。
下面是 C# 仍然可以完成的案例的一个示例
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<img id="navbarLogoWords" src="/img/home/Crunchsoft.techSignature.png"/>
<button @onclick="toggleNavBar" class="navbar-toggler" type="button" aria-expanded="@expandedState" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse @cssShowMenu">
<div id="navbar-items" class="navbar-nav">
<a @onclick="collapsedNavBar" class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a @onclick="collapsedNavBar" class="nav-item nav-link" href="Services">Services</a>
<a @onclick="collapsedNavBar" class="nav-item nav-link" href="#">Contact</a>
<a @onclick="collapsedNavBar" class="nav-item nav-link" href="#">About</a>
</div>
</div>
</nav>
@code {
private bool expandedState = false;
private string cssShowMenu = null;
private void toggleNavBar()
{
expandedState = !expandedState;
cssShowMenu = expandedState ? "show" : null;
}
private void collapsedNavBar()
{
expandedState = false;
cssShowMenu = expandedState ? "show" : null;
}
}
我希望这段代码可以帮助您或任何人。 >_<
关于jquery - 单击切换器图标后，Bootstrap 下拉菜单消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58529562/