Bootstrap déroulant ne fonctionne pas

Je ne peux pas faire de bootstrap déroulant au travail.
Voici mon code 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>

Ce que je fais mal? Merci pour vos réponses!

  • Vérifier ma réponse similaire à celui de l'affichage stackoverflow.com/questions/15592158/...
  • Mon problème était le manque de bootstrap, js fichiers, dans le cas qui aide à quelqu'un d'autre
  • J'avais mis à jour mon Gruntfile.js qui change de certains chemins dans la jsFileList...mettre à Jour les chemins d'accès et de l'exécution de l'appropriées tâches Grunt (grunt dev / grunt build / etc) a résolu mon problème.
InformationsquelleAutor hjuster | 2012-09-17
  1. 11

    De travail de démonstration: http://codebins.com/bin/4ldqp73

    essayer cette 

    <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>
    • Oups... je suis bête...j'ai été absent de bootstrap.fichier css. Sa fonctionne bien maintenant, merci!
    • La liste déroulante dans votre démonstration ne semble plus fonctionner, ou peut-être que le problème est avec mon navigateur.
    InformationsquelleAutor gaurang171
  2. 128

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

    J'avais 

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

    Espère que cela aide quelqu'un

    • Quelle est la différence?
    • afin de les fichiers js... hth...
    • a fait le tour pour moi
    • Imray, le script bootstrap registres des extensions de jQuery, donc si jQUery n'est pas chargé, les extensions ne sont jamais enregistrés.
    • Merci mec, a Fonctionné pour moi aussi!!!
    • L'ordre est important, en effet. Merci pour l'aide!

    InformationsquelleAutor Prince Ashitaka
  3. 71

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

    • Cela a réglé mon problème. Mon angulaire application a été tirant à de multiples exemplaires de bootstrap par le biais de la gulp tâche à injecter mon bower_components
    • C'était le problème dans mon cas!... merci
    • Fixe la mienne aussi, merci bien
    • Cela a réglé mon problème. Merci
    • ce fixe dans un ASP.NET MVC 5 projet avec des faisceaux
    • Il fixe pour moi. Merci.
    • vraiment ennuyeux... à l'aide de aurelia-webpack-squelette, j'ai besoin d'importer des fichiers d'amorce.css dans mon main.js mais si je importer 'bootstrap', j'obtiens que le comportement bizarre...
    • Je suis à l'aide de AdminLTE(ayant bootstrap) en application Rails et inclus tous les JS deux fois -- gaspillé près de 2 heures. Grâce retiré et il a travaillé à la fois

    InformationsquelleAutor kubilay
  4. 23

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

    Je n'en suis pas sûr du résultat bootstrap.min.js.

    • Merci. J'avais à la fois l'dropdown.js et bootstrap.js et donc ça ne fonctionne pas. Retrait de la dropdown.js résolu le problème.
    • Vous êtes le meilleur homme, j'ai passé environ 6 heures pour trouver où est le problème!!, merci encore..
    • Merci beaucoup Monsieur! J'ai le même problème, mais j'ai bootstrap.js et bootstrap.min.js.. Quand j'ai enlevé le dernier, il fonctionne.
    • Merci - Dans mon cas, j'ai eu les deux js/bootstrap.js ainsi que js/dropdown.js
    InformationsquelleAutor Fahrenheit
  5. 13

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

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

    Ensuite, vous aurez besoin d'inclure les fichiers js, il est recommandé de les inclure à la fin du document, généralement avant la </body> afin que les pages se chargent plus rapidement.

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

    Ajouter les lignes suivantes dans le corps des balises.

    <!-- 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>
    • Merci, cela m'a sauvé quelques temps.
    InformationsquelleAutor Shevon Silva
  7. 6

    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>
    • Je n'ai aucune idée de pourquoi ou ce que je faisais tort, mais cette réponse a fait pour moi. Merci Martin!
    • Je vous remercie. Je ne sais pas pourquoi cela a résolu le problème. Le menu a bien fonctionné avec /js/jquery.js et /js/bootstrap.min.js jusqu'à ce que le site a été migré sur un autre serveur Windows.
    InformationsquelleAutor Martin
  8. 5

    Avez-vous inclus jquery.js ?

    Aussi, de comparer 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 ok.

    <!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>
    InformationsquelleAutor Frankline
  9. 4

    Les deux bootstrap et jquery doit ê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>

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

    InformationsquelleAutor NotAMonkey24
  10. 3

    J'ai pensé à elle et de la façon la plus simple pour ce faire ist il suffit de copier et passé le CDN de bootstrap lien qui peut être trouvé dans https://www.bootstrapcdn.com/ et du Jquery CA Scripts qui peuvent être trouvés ici https://code.jquery.com/ et après tu copie le liens, le bootstrap liens coller sur la tête de l'HTML et le Script Jquery coller 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  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 fonctionne parfaitement, j'espère qu'elle travaille aussi pour vous 🙂

    InformationsquelleAutor Atdhe Kurteshi
  11. 2

    Essayer dans la section d'en-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="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    InformationsquelleAutor Hamza Javed
  12. 2

    Ici ce que j'ai fait est .....

    Juste enlevé bootstrap.min.js à partir de mon Projet et a ajouté bootstrap.js et il a commencé à travailler........

    bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js"
//"~/Scripts/bootstrap.min.js"));
    • L'ajout de #kubilay Réponse : vous pouvez avoir une seule classe nommée " A " par document. .min.css/.min.js - sont généralement les mêmes, les fichiers css et js avec tous les espaces retiré. Il leur fait le plus petit et le chargement plus rapide. Navigateur n'est pas besoin d'espaces, de toute façon.
    • Supprimer une si vous avez Utilisé les deux
    InformationsquelleAutor Mohit Dhawan
  13. 1

    Vous aurez à vérifier contradictoires fichiers css/propriétés par exemple, vous pourriez avoir ".nav" style personnalisé contenu ailleurs essayez de désactiver vos propres fichiers css et vérifier si cela fonctionne alors vérifier quels fichiers ou de style personnalisée qui rend les conflits
    assurez-vous également que vous êtes, y compris la bootstrap.min.js dans votre code

    InformationsquelleAutor Mancy
  14. 1

    J'ai eu un problème similaire, seulement de constater que j'avais ajouté le script bootstrap deux fois et le deuxième script bootstrap a été après ci-dessus le script jquery.

    Solution:

    • De s'assurer que bootstrap.min.js et jquery.min.js ne sont inclus qu'une fois dans votre fichier.
    • L'bootstrap.min.js script doit être inclus après jquery.min.js
    InformationsquelleAutor B.K
  15. 0

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

    Mon Problème : j'ai été en utilisant le recommande jquery 1.12.0 version de mon script jquery fichier.

    Solution : remplacer le script jquery jquery version 2.2.0.

    Qui a résolu pour moi.

    InformationsquelleAutor Everest Nwosu
  16. 0

    Pour moi, c'était une question de la SCRO. J'ai enlevé crossorigin="anonymous" de mon script d'importation des balises, et il a commencé à travailler à nouveau.

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

    Edit: Apparemment, l'ajout de defer à la script tag va également briser tous les Bootstrap goodies.

    InformationsquelleAutor Cameron Hudson
  17. 0

    Copier/coller le lien CSS suivie par la JS lien à partir du bootstrap site ici. Ensuite le menu déroulant devrait fonctionner.

    Ma page ressemble à ceci:

    <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)

    InformationsquelleAutor Pro Q