我已经从引导程序复制粘贴了一个导航栏：https://getbootstrap.com/docs/4.3/components/navbar/
当我将此代码粘贴到我的项目中时，导航栏会工作，除非我将浏览器缩小到移动大小并单击汉堡包菜单。当我点击菜单时，我的所有内容都会出现，但之后它们会很快消失。我还必须点击汉堡菜单两次才能显示锚标签。同样的事情也发生在我创建的导航栏上，我将在下面发布。
我的代码：
<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>
我的主机.shtml:
@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>
我试着把脚本放在页面的底部，把引导程序放在我的头标签的不同位置，但都无济于事。
我已经研究了许多其他堆叠式气流解决方案：
点击后引导下拉菜单消失
引导程序4下拉菜单中的切换复选框
点击时保持Bootstrap下拉列表打开
我没能从中找到一个对我有用的答案。
更令人沮丧的是，当我用小提琴创建导航栏时，它会起作用。
https://jsfiddle.net/MaxTaylor/6rftaw3o/1/
编辑：除了bootstrap，我已经试着把我所有的样式表都注释掉了，但我仍然有这个问题。我正在使用Blazor.AspNetCore。我使用Visual Studio代码尝试了同样的方法，它成功了，但在我的Blazor项目中仍然不起作用。
当我们在blazor项目中使用bootstrap时，我们必须进行大量调整，以使bootstrap javascript平稳运行。
对我来说，如果在blazor项目中，除了需要访问javascript API的不同情况外，我更喜欢避免使用javascript来处理仍然可以由C#完成的情况。
下面是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;
}
}
我希望这个代码片段能帮助你或任何人。>_<
我测试了您的两个代码片段，从我的角度来看，它们似乎按预期工作。这很可能意味着有一些CSS类覆盖了你的汉堡包功能。
我看不到自定义css，所以我的建议是在customSoftware.css和SeanStyle.css中搜索，看看是否有任何内容针对你的Button或汉堡包类。
我找到了问题的答案。由于Bootstrap如何操纵DOM，一些Bootstrap组件似乎无法与Blazor一起工作。
所以我在Razor组件中编写了自己的导航栏
<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-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">Services</a>
<a class="nav-item nav-link" href="#">Contact</a>
<a class="nav-item nav-link" href="#">About</a>
</div>
</div>
</nav>
然后为它编写了我自己的JavaScript文件：
function toggleNavBar() {
var x = document.getElementById("navbar");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
并在我的_Host.cshtml 中添加了链接
<script src="/javaScript/scripts.js"></script>
我想，因为我使用的是Blazor，所以在同一个组件中使用C#可能比在单独的文件中使用JS更有意义，但我不知道如何使用C#。