Le menu déroulant de Bootstrap ne fonctionne pas

Question

Je n'arrive pas à faire fonctionner le dropdown de bootstrap. Voici mon html pour le nav :

<ul class='nav'>
  <li class='active'>Home</li>
  <li class='dropdown'>
    <a class="dropdown-toggle" data-toggle="dropdown" href='#'>Personal asset loans</a>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">asds</a></li>
      <li class="divider"></li>
    </ul>
  </li>
  <li>Payday loans</li>
  <li>About</li>
  <li>Contact</li>
</ul>

Et voici les scripts :

<script type="text/javascript" src="js/bootstrap/bootstrap-dropdown.js"></script>
<script>
     $(document).ready(function(){
        $('.dropdown-toggle').dropdown()
    });
</script>

Qu'est-ce que je fais mal ? Merci pour vos réponses !

Answer 1

J'ai eu ce problème en utilisant Angular 12 et Bootstrap 5. Mon problème était que j'avais placé par erreur un fichier CSS dans la section scripts :

        "styles": [
          "node_modules/angular-calendar/css/angular-calendar.css",
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "node_modules/bootstrap-icons/font/bootstrap-icons.css",
          "node_modules/sweetalert2/src/sweetalert2.scss",
          "src/styles.css"
        ],
        "scripts": [
          "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
          "node_modules/sweetalert2/src/sweetalert2.scss"  <===== in wrong section
        ]

L'application s'est construite correctement et s'est exécutée sans qu'aucune erreur ne soit affichée dans la console du navigateur, mais le menu déroulant n'a rien donné.

Answer 2

Si vous êtes confronté à un problème de menu déroulant, ceci vous aidera peut-être à vous en sortir.

Étape 1 : Page de téléchargement de BootStrap

Étape 2 : Passez à ce *"CDN via jsDelivr "*Copiez et collez CDN dans la balise Web-Head.

o

Sinon, il suffit de copier le code ci-dessous et de le coller dans la balise head, et le tour est joué.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

J'espère que cela vous aidera. Salutations, Ahmad Iqbal Bhatti

Answer 3

J'avais installé Angular 7, jQuery 3.4.1, Popper 1.12.9 et Bootstrap 4.3.1, mais rien ne fonctionnait pour moi jusqu'à ce que je fasse ce petit hack dans les styles :

.dropdown.show .dropdown-menu {
    opacity: 1 !important;
}

Html ressemble à ça :

<nav class="navbar navbar-expand-lg navbar-dark fixed-top py-1">
 <div class="container-fluid">
    <ul class="navbar-nav">
        <li class="nav-item dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" id="dropdown-id"
                aria-expanded="false">Menu</button>
            <div class="dropdown-menu" aria-labelledby="dropdown-id">
                <a class="dropdown-item" [routerLink]='["/"]'>Main page</a>
                <a class="dropdown-item" [routerLink]='["/about"]'>About</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" [routerLink]='["/about/terms"]'>Terms</a>
                <a class="dropdown-item" [routerLink]='["/about/privacy"]'>Privacy</a>
            </div>
        </li>
     </ul>
  </div>
</nav>