Le menu déroulant Bootstrap ne fonctionne pas
J'ai du mal à faire fonctionner mes menus déroulants. Je peux obtenir que la barre de navigation apparaisse parfaitement, mais lorsque je clique sur "Dropdown" (l'un ou l'autre), le menu déroulant n'apparaît pas. J'ai essayé de regarder d'autres articles à ce sujet, mais rien qui résolve les problèmes de tout le monde ne m'aide. J'ai copié le code source directement depuis le site Web de bootstrap, mais je n'arrive pas à le faire fonctionner sur ma machine. Quelqu'un a des idées? Je la regarde depuis une heure et n'arrive pas à comprendre le problème.
<head>
<script src="resource/js/jquery-1.11.0.js"></script>
<script src="resources/js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('dropdown-toggle').dropdown()
});
</script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data- target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" >
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
Peut-être essayer avec
<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">
et voir si ça va marcher.
J'ai eu un projet bootstrap + Rails et le menu déroulant a bien fonctionné .
C'est la solution qui a résolu le problème, ajoutez ce qui suit au fichier .js:
$(document).ready(function() {
$(".dropdown-toggle").dropdown();
});
Solution de travail à 100%
il suffit de placer votre lien Jquery en premier lieu tous les liens js et css
Exemple correct
<script src="jquery/jquery.js"></script>
<script type="text/javascript" src='js/bootstrap.min.js'></script>
<link rel="stylesheet" href="css/bootstrap.css" />
Exemple faux!
<script type="text/javascript" src='js/bootstrap.min.js'></script>
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="jquery/jquery.js"></script>
Placez le lien jquery js avant le lien bootstrap js comme suit:
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
au lieu de:
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
J'ai fait face à cela alors que j'utilisais ASP .NET Forms. La solution que j'ai utilisée consistait à supprimer ou commenter les références jQuery et Bootstrap du <asp:ScriptManager runat="server"> dans la page maître. Il semble que cela crée un conflit avec les références jQuery et Bootstrap que vous avez insérées dans le <header>.
Peut-être que quelqu'un peut en tirer profit:
Résumé (a.k.a. tl; dr)
Les listes déroulantes d'amorçage ont cessé de tomber en raison de la mise à niveau de Django-bootstrap3 version 6.2.2 vers 11.0.0.
Contexte
Nous avons rencontré un problème similaire dans un ancien site Django qui repose largement sur bootstrap à Django-bootstrap3. Le site avait toujours bien fonctionné et continuait de fonctionner en production, mais pas sur notre système de test local. Il n'y avait aucun changement apparent évident dans le code, donc un problème de dépendance était le plus probable.
Symptômes
Lors de la visite du site sur le serveur de test local Django , l’apparence parfaite était O.K. à première vue: style/disposition utilisant bootstrap comme prévu, y compris la barre de navigation. Cependant, tous les menus déroulants n'ont pas pu être déroulés.
Aucune erreur dans la console du navigateur. Tous les fichiers statiques js et css ont été chargés avec succès, et les fonctionnalités d'autres packages s'appuyant sur jquery fonctionnaient comme prévu.
Solution
Il s'est avéré que le package Django-bootstrap3 de notre environnement python local avait été mis à niveau vers la dernière version, 11.0.0, alors que le site avait été construit à l'aide de 6.2.2.
Revenir à Django-bootstrap3==6.2.2 a résolu le problème pour nous, bien que je n’aie aucune idée de ce qui l’a causé.
Si vous rencontrez toujours le même problème, assurez-vous de vérifier votre view Page source dans votre navigateur pour vérifier si tous les fichiers jquery et bootstrap sont chargés et si les chemins d'accès au fichier sont corrects. Le plus important! assurez-vous d'utiliser le dernier fichier jquery stable.
Je pense que c'est la question de l'itinéraire de votre fichier d'itinéraire. Pas le bootstrap ni le fichier JQuery.
J'utilise Rails 4.0 et j'ai rencontré le même problème
Voici ma solution qui a passé le test
ajouter à Gemfile
gem 'bootstrap-sass'
courir
bundle install
puis ajoutez à app/assets/javascripts/application.js
//= require bootstrap
Ensuite, le menu déroulant devrait fonctionner
À propos, la solution de Chris fonctionne aussi pour moi.
Mais je pense qu’il est moins conforme à l’idée du pipeline d’actifs
Selon getBootstrap.com, les menus déroulants sont basés sur la bibliothèque tierce Popper.js. Ainsi, si le menu déroulant ne fonctionne pas avec clic mais fonctionne uniquement en survol du menu déroulant, incluez popper.js, bootstrap.js et bootstrap.css. Ne pas inclure popper.js avant d'inclure les ensembles d'amorçage pourrait être l'une des raisons.
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"></link>
_ {On dirait qu'il reste encore beaucoup à faire pour Rails 4.} _
À l'intérieur de vous, ajoutez Gemfile.
gem 'bootstrap-sass', '~> 3.2.0.2'
Ensuite, vous devez courir
$ bundle install
C'est la partie que personne n'a mentionnée
Ouvrez votre fichier config/application.rb
ajoutez ce droit avant l'avant-dernière
config.assets.precompile + =% w (*. png * .jpg * .jpeg * .gif)
comme on le voit ici environ 20% en bas de la page.
Créez ensuite un fichier custom.css.scss dans ce répertoire.
app/assets/stylesheets
comme vu ici un peu plus loin de la tâche ci-dessus
À l'intérieur de ce fichier comprennent
@import "bootstrap";
Maintenant, arrêtez votre serveur et redémarrez et tout devrait bien fonctionner.
J'ai essayé de lancer bootstrap sans utiliser de gemme mais cela n'a pas fonctionné pour moi.
J'espère que ça aide quelqu'un!
Ma version de bootstrap pointait sur bootstap4-alpha,
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
crossorigin="anonymous"></script>
changé en 4-beta
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
crossorigin="anonymous"></script>
et ça a commencé à fonctionner
J'ai essayé toutes les réponses ci-dessus et la seule version qui fonctionne pour moi est le jquery 1.11.1 . J'ai essayé avec toutes les autres versions 1.3.2, 1.4.4, 1.8.2, 3.3 .1 et le menu déroulant de la barre de navigation ne fonctionne pas.
<script src="jquery/jquery-1.11.1.min.js"></script>
le problème est que href est href = "#" vous devez supprimer href = "#" dans toutes les balises
Dans mon cas, la désactivation de Chrome Extensions a corrigé le problème. Je les ai retirés de Chrome un à un jusqu'à ce que je trouve le coupable.
Étant donné que je suis l'auteur de l'extension Chrome incriminée, je suppose que je corrigerais mieux l'extension!
Pour Bootstrap 4, vous avez besoin d’une bibliothèque supplémentaire. Si vous lisez la console de votre navigateur, Bootstrap imprimera en réalité un message d'erreur vous indiquant que vous en avez besoin pour que la liste déroulante fonctionne.
Error: Bootstrap dropdown require Popper.js (https://popper.js.org)
dans les projets angulaires, nous ajoutons ces lignes angular-cli.json ou angular.json:
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],