web-dev-qa-db-fra.com

La liste déroulante Bootstrap 4 ne fonctionne qu'au deuxième clic

Salut les gars, je travaille sur un projet Django qui utilise bootstrap4 et j'ai un petit problème avec le menu déroulant ...

Le toggler bascule le menu déroulant après le deuxième lien!

Qu'est-ce que j'ai mal fait?

Ceci est mon code HTML déroulant:

            <li class="nav-item dropdown show">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown Toggler
                </a>
                <div class="dropdown-menu" role="menu" aria-labelledby="navbarDropdown">
                 <a class="dropdown-item">Link 1</a>
                 <a class="dropdown-item">Link 2</a>
                </div>
            </li>
drop-down-menubootstrap-4
4
gbrennon

vous devez utiliser la bascule comme ça et assigner le data-target au menu déroulant avec son identifiant 

en utilisant 

data-target = "# navbarDropdown"

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

puis attribuez cet identifiant au menu

        <li class="nav-item dropdown show">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarDropdown" aria-controls="navbarDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
            <div id="navbarDropdown" class="dropdown-menu"  role="menu" aria-labelledby="navbarDropdown">
             <a class="dropdown-item">Link 1</a>
             <a class="dropdown-item">Link 2</a>
            </div>
        </li>
3
mooga

J'ai eu le même problème alors résolu. Souvent, à cause de double import de bibliothèques bootstrap js. Hope vous aidera.

6
Iwan B.

Je suis tombé sur le même problème récemment, j'ai résolu ce problème en ajoutant $ ('. Dropdown-toggle'). Dropdown () après le chargement du menu déroulant. J'espère que cela peut aider sans changer de data-toggle = "dropdown" à data-toggle = "collapse".

1
Arjun

Essayez de mettre le fichier jst bootstrap avant bootstrap css

Ex: 

  1. Liez d'abord le fichier Bootstrap.min.js.

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

  1. Puis liez le fichier css

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

J'ai eu le même problème et après avoir changé les positions du js et du css, le menu déroulant fonctionne bien. J'espère que cela vous a aidé.

1
Nimesh Nishara Indimagedara