Le menu déroulant de Bootstrap ne fonctionne pas

Question

Le menu déroulant de Bootstrap ne fonctionne pas

Demandé el 17 de Septembre, 2012: Quand la question a-t-elle été
424395 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la 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 !

Demandé el 17 de Septembre, 2012 par hjuster

Answer 1

5 Réponses

Answer 2

4voto

Atdhe Kurteshi Points 357

J'ai trouvé la solution et le moyen le plus simple de le faire est de copier et coller le lien CDN de bootstrap qui se trouve à l'adresse suivante https://www.bootstrapcdn.com/ et le CDN Jquery scripts qui peut être trouvé ici https://code.jquery.com/ et après avoir copié les liens, les liens bootstrap se collent sur l'entête du HTML et le script de Jquery se colle dans le corps du HTML comme 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, cela fonctionne parfaitement ; j'espère que cela fonctionne aussi pour vous :)

Répondu el 15 de Novembre, 2016 par Atdhe Kurteshi (357 Points )

Answer 3

3voto

Mohit Dhawan Points 329

Voici ce que j'ai fait : .....

Je viens de supprimer bootstrap.min.js de mon projet et d'y ajouter bootstrap.js et cela a commencé à fonctionner.........

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

Répondu el 8 de Juin, 2016 par Mohit Dhawan (329 Points )

Answer 4

3voto

Nishant Ingle Points 405

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>

Répondu el 20 de Août, 2019 par Nishant Ingle (405 Points )

Answer 5

3voto

s k Points 1016

Dans bootstrap 5, il faut passer de data-toggle='dropdown' a data-bs-toggle='dropdown'

Répondu el 28 de Avril, 2022 par s k (1016 Points )

Answer 6

2voto

Hamza Javed Points 33

Essayez ceci dans la section tête

<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="http://stackoverflow.com//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

Répondu el 17 de Février, 2016 par Hamza Javed (33 Points )

Le menu déroulant de Bootstrap ne fonctionne pas

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Le menu déroulant de Bootstrap ne fonctionne pas

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: