Mein Bootstrap 4-Dropdown funktioniert nicht und ich weiß nicht, wie ich es beheben kann

Question

Ich bin HTML-Neuling und habe stundenlang versucht, mein Dropdown-Menü zum Laufen zu bringen. Ich habe viele Beiträge mit ähnlichen Problemen durchsucht, kann das Problem aber immer noch nicht finden und lösen. Ich bin mir nicht sicher, ob das Problem auch durch mein Skript verursacht wird

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<header class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#" id="logo">Logo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
        <span class="navbar-toggler-icon"></span>
        </button>

  <nav class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item"><a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
      <li class="nav-item">
        <div class="dropdown">
          <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a href="#" class="dropdown-item">Action</a>
            <a href="#" class="dropdown-item">Another action</a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">Something else here</a>
          </div>
        </div>
      </li>
      <li class="nav-item"><a class="nav-link" href="#">Disabled</a></li>
    </ul>
  </nav>
</header>

Vielen Dank im Voraus!

Ich habe es mit data-bs-toggle="dropdown" 替换 data-toggle="dropdown" versucht, aber es hat nicht funktioniert, weil ich Bootstrap 4 verwende und den Code direkt von Bootstrap kopiert und eingefügt habe, und es ist immer noch fehlgeschlagen

Answer 1

CDN 不适用于您的 jQuery。 Bootstrap 需要它才能运行。您在控制台中得到了一条线索，应该有一个错误表明它需要 jQuery。所以你可以：

替换这个

https://ajax.googleleapis.com /ajax/libs/jquery/3.5.1/jquery.min.js

有了这个

https://code.jquery.com/jquery-3.6.1 .min.js