Le menu déroulant Bootstrap ne fonctionne pas

100

J'ai du mal à faire fonctionner mes listes déroulantes. Je peux faire en sorte que la barre de navigation s'affiche parfaitement, mais lorsque je clique sur "Dropdown" (l'un ou l'autre), il n'affiche pas le menu déroulant. J'ai essayé de consulter d'autres articles à ce sujet, mais rien qui a résolu les problèmes de tout le monde n'a aidé. J'ai copié la source directement à partir du site Web de bootstrap, mais je n'arrive pas à la faire fonctionner sur ma machine. Quelqu'un a des idées? Je le regarde depuis une heure et je n'arrive pas à comprendre quel est 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 -->

javascript jquery html css twitter-bootstrap user2540528
la source
1
Désolé, au travail quand j'ai écrit ceci. J'ai édité l'explication.
user2540528
Pouvez-vous nous donner le lien? @ user2540528
STP38
Le lien vers le fichier JS?
user2540528
1
Je viens de copier votre code et ajouté js / css et il fonctionne sur ma machine
Chris
«J'ai copié la source directement à partir du site Web de bootstrap» @ user2540528, pouvez-vous me donner ce lien?
STP38

Réponses:

142

Essayez peut-être 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 voyez si cela fonctionnera.

Chris
la source
Cela l'a fait. Une raison pour laquelle les fichiers locaux ne fonctionneraient pas? Et ces sources js si je déploie ceci sur un domaine correct? Je veux juste m'assurer que mon application fonctionne toujours après l'avoir terminée et publiée. (C'est mon premier, c'est pourquoi je demande)
user2540528
@ user2540528 Le fichier est probablement nommé différemment jquery-1.11.0.jsou il n'y est pas du tout.
Chris
user2540528 Vous avez semblé manquer bootstrap.css
Avec
1
Mon problème était que j'avais le bootstrap.css au bon endroit mais je n'avais pas le bootstrap.min.js inclus dans mon bundle
codingNightmares
J'ai réalisé que l'ordre de ces lignes de code est également important. Si vous mettez Google Apis comme dernière ligne de code, cela ne fonctionne pas.
Efe Büyük
114

J'avais un projet bootstrap + rails, et le menu déroulant fonctionnait bien. Ils se sont arrêtés pour travailler après une mise à jour ...

C'est la solution qui a résolu le problème, ajoutez ce qui suit au fichier .js:

$(document).ready(function() {
    $(".dropdown-toggle").dropdown();
});
Iwan B.
la source
Résolution d'un problème avec Bootstrap 3 et Rails 4.2 où le menu déroulant ne fonctionnait que la première fois, mais pas au deuxième clic.
bovender le
Projet Grails avec Spud CMS - Cela a résolu mon problème de bascule dans la liste déroulante.
Tyler Rafferty
merci beaucoup pour cela 1. tout le monde dit "ajoutez la jquery avant le bootstrap". mais c'était comme ça. Ce n'est qu'ils répondent, après plus d'une heure de recherche, qui a fonctionné!
MaNTiS
1
Cela m'a énormément aidé. Une idée de la raison pour laquelle ce correctif est nécessaire?
Brack
1
Cette solution a fonctionné pour moi. Il s'est avéré que j'avais importé du bootstrap sur mon site deux fois, après l'avoir importé une seule fois, il a commencé à fonctionner sans le correctif de cette solution.
harshpatel991
27

Solution 100% fonctionnelle

placez simplement votre lien Jquery en premier de 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>
Hidayat ullah
la source
Cela n'a pas fonctionné dans mon cas. J'ai dû utiliser la solution d'Iwan B.
toddmo
1
@Nabin Cela fonctionne parce que nous devons d'abord charger jquery, puis bootstrap, puisque bootstrap utilise jquery
Siddaram H
@toddmo Cela fonctionne, il suffit de vérifier le jquery, le bootstrap et le css chargés correctement ou non à partir de l'onglet networy dans google crome dbugger
LMK
12

Mettez le lien jquery js avant le lien bootstrap js comme ceci:

<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>
Seyibabs
la source
Put the jquery css ...>Put the jquery js ...
allcaps
2
Vos mots sont corrects mais les blocs de code sont à l'opposé de ce que vous dites.
Astra Bear le
4

Selon getBootstrap.com, les listes déroulantes sont construites sur la bibliothèque tierce Popper.js. Donc, si le menu déroulant ne fonctionne pas en cliquant mais ne fonctionne que sur le survol de la liste déroulante, incluez popper.js, bootstrap.js et bootstrap.css. Ne pas inclure popper.js avant d'inclure les bundles bootstrap 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>

https://getbootstrap.com/docs/4.0/components/dropdowns/

nikhilmeth
la source
1
Pour la version 4 c'est la réponse qui est un grand changement quand nous sommes habitués à n'inclure que Jquery et bootstrap dans nos projets.
Vindic
1
Oui, l'ordre compte vraiment.
nikhilmeth
C'est celui qui a fonctionné pour moi. Copié les mêmes codes de la page Bootstrap, mais c'est le bon ordre dans
lequel
3

J'ai fait face à cela pendant que j'utilisais des formulaires ASP .NET. La solution que j'ai utilisée était de supprimer ou de commenter les références jQuery et Bootstrap de la <asp:ScriptManager runat="server">page maître. Il semble que cela crée un conflit avec les références jQuery et Bootstrap que vous mettez dans le fichier <header>.

Mohammad AlShaabi
la source
2

Au cas où quelqu'un serait toujours confronté au même problème, assurez-vous de vérifier la source de votre page d'affichage 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.

Munam Yousuf
la source
2

Peut-être que quelqu'un peut en bénéficier:

Résumé (aka tl; dr)

Les listes déroulantes Bootstrap ont cessé de tomber en raison de la mise à niveau de la django-bootstrap3version 6.2.2vers 11.0.0.

Contexte

Nous avons rencontré un problème similaire dans un ancien djangosite qui dépend fortement de bootstrapthrough django-bootstrap3. Le site avait toujours bien fonctionné et continuait de le faire en production, mais pas sur notre système de test local. Il n'y avait pas de changements liés évidents 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 django local , cela semblait parfaitement correct à première vue: style / mise en page en utilisant bootstrapcomme prévu, y compris la barre de navigation. Cependant, tous les menus déroulants n'ont pas pu se dérouler.

Aucune erreur dans la console du navigateur. Tous les fichiers statiques jset tous les cssfichiers ont été chargés avec succès, et les fonctionnalités d'autres packages s'appuyant sur jqueryfonctionnaient comme prévu.

Solution

Il s'est avéré que le django-bootstrap3package de notre environnement python local avait été mis à niveau vers la dernière version 11.0.0, alors que le site a été construit avec 6.2.2.

Revenir en arrière pour django-bootstrap3==6.2.2résoudre le problème pour nous, même si je n'ai aucune idée de ce qui l'a exactement causé.

djvg
la source
1

J'utilise des 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, la liste déroulante devrait fonctionner

Au fait, la solution de Chris fonctionne aussi pour moi.

Mais je pense que c'est moins conforme à l'idée du pipeline d'actifs

user1143669
la source
0

On dirait qu'il y a plus à faire pour Rails 4.

  1. À l'intérieur de vous ajoutez Gemfile.

    gem 'bootstrap-sass', '~> 3.2.0.2'

comme vu ici

  1. Ensuite, vous devez courir

    $ installation groupée

C'est la partie que personne n'a mentionnée

Ouvrez votre fichier config / application.rb

  1. ajoutez ceci juste avant l'avant-dernière extrémité

    config.assets.precompile + =% w (*. png * .jpg * .jpeg * .gif)

comme on le voit ici environ 20% en bas de la page.

  1. Ensuite, créez un fichier custom.css.scss dans ce répertoire

    app / actifs / feuilles de style

comme on le voit ici un peu plus loin de la tâche ci-dessus

  1. À l'intérieur de ce fichier incluent

    @import "bootstrap";

Maintenant, arrêtez votre serveur et redémarrez et tout devrait bien fonctionner.

J'ai essayé d'exécuter bootstrap sans utiliser de gemme mais cela n'a pas fonctionné pour moi.

J'espère que cela aide quelqu'un!

Wes Duff
la source
0

Je pense que c'est la question de l'itinéraire de votre fichier d'itinéraire. Pas le bootstrap ni le fichier JQuery.

Alvian Casablancas
la source
0

Dans mon cas, la désactivation des extensions Chrome a résolu le problème. Je les ai supprimés de Chrome un par un jusqu'à ce que je trouve le coupable.

Puisque je suis l'auteur de l'extension Chrome incriminée, je suppose que je ferais mieux de corriger l'extension!

Toddmo
la source
0

Ma version de bootstrap pointait vers 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

Siddaram H
la source
0

le problème est que href est href = "#" vous devez supprimer href = "#" dans toutes les balises

Victor Jimenez
la source
0

Pour Bootstrap 4, vous avez besoin d'une bibliothèque supplémentaire. Si vous lisez la console de votre navigateur, Bootstrap imprimera en fait un message d'erreur vous indiquant que vous en avez besoin pour que le menu déroulant fonctionne.

Error: Bootstrap dropdown require Popper.js (https://popper.js.org)
luskbo
la source
0

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"

  ],
ATEF CHAREF
la source
0

J'ai essayé toutes les réponses ci-dessus et la seule version qui fonctionne pour moi est la 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 la liste déroulante de la barre de navigation ne fonctionne pas.

<script src="jquery/jquery-1.11.1.min.js"></script>
Zeke
la source
0

Si vous rencontrez le problème dans Ruby on Rails , la solution exhaustive est fournie par le fichier readme de Bootstrap Ruby Gem .

ou en bref:

  1. renommer application.cssenapplication.scss
  2. ajouter @import "bootstrap";
  3. ajouter gem 'jquery-rails'à Gemfilesauf s'il existe.
  4. ajouter //= require jquery3 //= require popper //= require bootstrap //= require bootstrap-sprockets à application.js.
Esmaeil MIRZAEE
la source