Question

这可能是一个相对容易解决的问题，但对我而言不是，因此将不胜感激。在https://freecodecamp.org的投资组合项目中工作时，我意识到，将代码复制到VS代码并在浏览器中查看时，导航栏上的芝士汉堡按钮没有响应。

但是，当我在Codepen的编辑器中执行相同的操作时，它就像一个魅力。这是指向Codepen https://codepen.io/stealthman22/full/PeZvNK/中页面的链接。还有“乳酪汉堡”按钮的代码段：

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarnavbarSupportedContent"
      aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

请问可能有什么问题吗？干杯！！

Answer 1

好的，所以我在计算机上测试了您的代码，发现其中有两个问题

首先，在jquery.min.js之前声明了boostrap。使用boostrap时，最好先加载jquery，因为前者与jquery库本身有一定的依赖关系

第二个Bootstrap CDN的完整性SHA384无效。

当您打开控制台时，它会引发错误

Failed to find a valid digest in the 'integrity' attribute for resource 'https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js'

我用这些替换您的CDN，它的工作就像一个魅力

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

现在在浏览器上看起来还不错

Bootstrap 4芝士汉堡按钮无法响应外部代码笔

1 个答案: