web-dev-qa-db-fra.com

Bootstrap dropdown ne fonctionne pas

Je ne peux pas faire fonctionner la liste déroulante bootstrap. Voici mon html pour 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!

htmldrop-down-menutwitter-bootstrap
54
hjuster

Démo de travail: http://codebins.com/bin/4ldqp73

essaye ça 

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

J'ai eu le même problème. Après quelques heures de dépannage trouvé que,

J'ai eu 

<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>

au lieu de,

<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>

J'espère que cela aide quelqu'un

122
Prince Ashitaka

J'ai eu le même problème quand j'ai inclus le bootstrap.min.js à deux reprises. Supprimé l'un d'entre eux et il a commencé à fonctionner.

68
kubilay

FYI: Si vous avez bootstrap.js, vous devriez pas ajouter bootstrap-dropdown.js.

Je ne suis pas sûr du résultat avec bootstrap.min.js.

23
Fahrenheit

Pour votre style, vous devez inclure les fichiers css de bootstrap, généralement juste avant l'élément </head>.

<link href="css/bootstrap.css" rel="stylesheet">

Ensuite, vous devrez inclure les fichiers js. Il est recommandé de les inclure à la fin du document, généralement avant le </body> pour que les pages se chargent plus rapidement.

<script src="js/jquery.js"></script>        
<script src="js/bootstrap.js"></script>
13
Ôûssàmâ Höûd

Ajoutez les lignes suivantes dans les balises body.

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://code.jquery.com/jquery.js"></script>
  <!-- Include all compiled plugins (below), or include individual files 
        as needed -->
  <script src="js/bootstrap.min.js"></script>
7
Shevon Silva

vous devez importer ces fichiers dans le <head></head> de votre code HTML.

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
5
Martin

Avez-vous inclus jquery.js? 

Comparez également cette ligne de code avec la vôtre:

<a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans<b class="caret"></b></a>

Voir cette version qui fonctionne bien.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Bootstrap dropdown</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />

</head>
<body>
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <ul class="nav">
                    <a class="brand" href="#">w3resource</a>
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li class="dropdown" id="accountmenu">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">PHP</a></li>
                            <li><a href="#">MySQL</a></li>
                            <li class="divider"></li>
                            <li><a href="#">JavaScript</a></li>
                            <li><a href="#">HTML5</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container-fluid">
     <h1>Dropdown Example</h1>
    </div>
    <script type="text/javascript" src="js/jquery-latest.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.dropdown-toggle').dropdown();
        });
   </script>
</body>
</html>
5
Frankline

Bootstrap et jquery doivent être inclus:

<link type="text/css" href="/{ProjectName}/css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<script type="text/javascript" src="/{ProjectName}/js/jquery-x.x.x.custom.min.js"></script>

<link type="text/css" href="/{ProjectName}/css/bootstrap.css" rel="stylesheet" />
<script type="text/javascript" src="/{ProjectName}/js/bootstrap.js"></script>

REMARQUE: jquery-x.x.x.min.js version doit être version 2.x.x !!!

3
NotAMonkey24

Je l'ai compris et le moyen le plus simple de le faire est simplement de copier et coller le lien CDN du lien d'amorçage qui se trouve dans https://www.bootstrapcdn.com/ et les scripts JND CDN disponibles ici https://code.jquery.com/ et après avoir copié les liens, les liens d’amorçage collent sur l’en-tête de HTML et le script Jquery collé dans le corps de HTML, comme dans l’exemple ci-dessous: 

    <!DOCTYPE html>
    <html>
      <head>

        <title>Purrfect Match Landing Page</title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <!--<link rel="stylesheet" href="griddemo.css">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

      </head>

      <body>

        <!-- Latest compiled and minified JavaScript -->
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">      </script>    
      </body>
    </html>

Pour moi ça marche parfait j'espère que ça marche aussi pour toi :)

3
Atdhe Kurteshi

Voici ce que j'ai fait, c'est ..... 

Vient de retirer bootstrap.min.js de mon projet et d’y ajouter bootstrap.js et que cela commence à fonctionner ...

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js"
                  //"~/Scripts/bootstrap.min.js"));
2
Mohit Dhawan

Essayez ceci dans la section head

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
2
Hamza Javed

Vous devrez vérifier les fichiers/propriétés CSS en conflit. Par exemple, vous pourriez avoir le contenu du style personnalisé ".nav" ailleurs. Essayez de désactiver vos propres fichiers CSS et vérifiez si cela fonctionne, puis vérifiez le fichier ou le style personnalisé à l'origine des conflits. Assurez-vous également d'inclure le fichier bootstrap.min.js dans votre code.

1
Mancy

J'ai eu un problème similaire seulement pour constater que j'avais ajouté le script d'amorçage deux fois et que le second script d'amorçage était après ci-dessus le script jquery.

Solution:

  • Assurez-vous que bootstrap.min.js et jquery.min.js ne sont inclus qu'une fois dans votre fichier.
  • Le script bootstrap.min.js devrait être inclus après jquery.min.js
0
B.K

Essayez ce code:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=Edge">
    <title>Bootstrap Tutorial</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <h1>Welcome to Bootstrap</h1>
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown button
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </div>


    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
0
Nishant Ingle

Copiez/collez le lien CSS suivi du lien JS du site de démarrage ici . Ensuite, la liste déroulante devrait fonctionner.

Ma page ressemble à:

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <title>Website Title</title>
  </head>
  <body>
    <div id="content" />
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" 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 dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>
  </body>
</html>

(Barre de navigation de ici )

0
Pro Q

J'ai eu le même problème qui m'a amené ici.

Mon problème: J'utilisais la version recommandée de jquery 1.12.0 comme fichier script jquery.

Solution: remplacé le script jquery par la version 2.2.0 de jquery.

Cela l'a résolu pour moi.

0
Everest Nwosu

Pour moi, c'était un problème de la SCRO. J'ai supprimé crossorigin="anonymous" de mon script en important des balises, et cela a recommencé à fonctionner.

BTW les dernières balises de script, dans le bon ordre, peuvent toujours être trouvées ici: https://getbootstrap.com/

Modifier: Apparemment, ajouter defer à la balise script cassera également tous les goodies Bootstrap.

0
Cameron Hudson