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é
424394 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

13voto

mecdeality Points 71

Je viens d'ajouter JS partie de bootstrap à ma page d'index, puis ça a marché

Collez ceci, si vous utilisez la dernière version de bootstrap (01.12.2020)

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

Répondu el 1 de Décembre, 2020 par mecdeality (71 Points )

Answer 3

8voto

Shevon Silva Points 11

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>

Répondu el 5 de Août, 2014 par Shevon Silva (11 Points )

Answer 4

7voto

Martin Points 125

Vous devez importer ces fichiers dans le <head></head> de votre 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>

Répondu el 27 de Juin, 2014 par Martin (125 Points )

Answer 5

6voto

Frankline Points 8947

Avez-vous inclus jquery.js ?

Aussi, comparez 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>

Répondu el 17 de Septembre, 2012 par Frankline (8947 Points )

Answer 6

4voto

David Liao Points 333

Bootstrap et jquery doivent être inclus :

<link type="text/css" href="http://stackoverflow.com/{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="http://stackoverflow.com/{ProjectName}/css/bootstrap.css" rel="stylesheet" />
<script type="text/javascript" src="/{ProjectName}/js/bootstrap.js"></script>

NOTE : version de jquery-x.x.x.min.js doit être la version 2.x.x ! !!

Répondu el 19 de Juillet, 2016 par David Liao (333 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: