因此，我正在使用 Laravela 和 Vue.js 创建一个简单的网站，以及响应式网站，我添加了 bootstrap 4。一切正常，导航栏在它应该折叠的时候折叠，切换按钮出现，当我点击它时，它显示一切。但是，当我单击切换按钮以隐藏导航栏时，它只是闪烁并且不执行任何操作。
<!--Navigation bar-->
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand" href="#">website<span id = "EditorColorist">editor colorist</span></a>
<button class="navbar-toggler" data-toggle="collapse" data-target = "#collapsibleNavId">
<span class = "navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavId">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="/">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">CONTACT</a>
</li>
</ul>
</div>
</nav>
<!--Navigation bar-->
是的，我在 CSS 之前添加了 JS、Jquery。
最佳答案
我为此创建了一个简单的片段进行测试，它上面的切换器对我来说工作得很好。欢迎您亲自尝试。
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<!--Navigation bar-->
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand" href="#">website<span id = "EditorColorist"> editor colorist</span></a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#collapsibleNavId">
<span class = "navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavId">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="/">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">CONTACT</a>
</li>
</ul>
</div>
</nav>
<!--Navigation bar-->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>您可以尝试检查您的 css 以确保您没有任何与 bootstrap 使用的类冲突的类。我已经看到这种情况发生并导致导航栏的工作方式出现问题。
关于javascript - Bootstrap 中的切换按钮不想 "untoggle"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59544938/