Heim  >  Fragen und Antworten  >  Hauptteil

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

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

P粉917406009P粉917406009180 Tage vor294

Antworte allen(1)Ich werde antworten

  • P粉011684326

    P粉0116843262024-04-03 12:57:46

    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

    Antwort
    0
  • StornierenAntwort