实现JavaScript后,Bootstrap dropdown-toggle不再起作用

我正在研究具有一些下拉菜单的导航栏,并且一切正常。但是,我决定为其他功能需要一些js。所以我粘贴了这个:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

这是下拉菜单的代码:

<div class="bottomHeader collapse navbar-collapse" id="navbarTogglerDemo01">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#"> Resources for </a>
    <div class="dropdown-menu boxes" style="left: 110px; text-align: left">
      <a style="padding-left: 10px;" href="#">Students</a><br>
      <a style="padding-left: 10px;" href="#">Faculty and staff</a><br>
      <a style="padding-left: 10px;" href="#">Alumni</a><br>
      <a style="padding-left: 10px;" href="#">Parents</a><br>
    </div>
  </li>
</div>

由于某种原因,下拉列表刚刚停止工作。如果删除引导脚本,它将再次起作用。有人知道为什么吗?