Das Bootstrap-Dropdown-Menü funktioniert nicht

100

Ich habe Probleme, meine Dropdowns zum Laufen zu bringen. Ich kann die Navigationsleiste perfekt anzeigen lassen, aber wenn ich auf "Dropdown" (eines davon) klicke, wird das Dropdown-Menü nicht angezeigt. Ich habe versucht, andere Beiträge dazu zu lesen, aber nichts, was die Probleme aller behoben hat, hat geholfen. Ich habe die Quelle direkt von der Bootstrap-Website kopiert, aber ich kann sie anscheinend nicht auf meinem Computer zum Laufen bringen. Hat jemand irgendwelche Ideen? Ich habe eine Stunde lang darauf gestarrt und kann anscheinend nicht herausfinden, wo das Problem liegt.

<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
quelle
1
Entschuldigung, bei der Arbeit, als ich das geschrieben habe. Ich habe die Erklärung bearbeitet.
user2540528
Könnten Sie uns den Link geben? @ user2540528
STP38
Der Link zur JS-Datei?
user2540528
1
Ich habe gerade Ihren Code kopiert und js / css hinzugefügt und es funktioniert auf meinem Computer
Chris
"Ich habe die Quelle direkt von der Bootstrap-Website kopiert" @ user2540528, Können Sie mir diesen Link geben?
STP38

Antworten:

142

Vielleicht versuchen Sie es mit 

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

und sehen, ob es funktionieren wird.

Chris
quelle
Das hat es geschafft. Gibt es einen Grund, warum die lokalen Dateien nicht funktionieren würden? Und diese js Quellen, wenn ich dies auf einer Domain richtig bereitstelle? Ich möchte nur sicherstellen, dass meine App auch nach Abschluss und Veröffentlichung noch funktioniert. (Es ist meine erste, deshalb frage ich)
user2540528
@ user2540528 Wahrscheinlich hat die Datei einen anderen Namen jquery-1.11.0.jsoder ist überhaupt nicht vorhanden.
Chris
user2540528 Sie schienen bootstrap.css
Avec
1
Mein Problem war, dass ich die
Datei
Mir wurde klar, dass die Reihenfolge dieser Codezeilen ebenfalls wichtig ist. Wenn Sie Google Apis als letzte Codezeile eingeben, funktioniert dies nicht.
Efe Büyük
114

Ich hatte ein Bootstrap + Rails-Projekt und Dropdown hat gut funktioniert. Nach einem Update haben sie aufgehört zu arbeiten ...

Dies ist die Lösung, mit der das Problem behoben wurde. Fügen Sie der .js-Datei Folgendes hinzu:

$(document).ready(function() {
    $(".dropdown-toggle").dropdown();
});
Iwan B.
quelle
Ich habe ein Problem mit Bootstrap 3 und Rails 4.2 behoben, bei dem das Dropdown-Menü nur beim ersten Mal funktioniert, nicht jedoch beim zweiten Klick.
Bovender
Grails-Projekt mit Spud CMS - Dies hat mein Dropdown-Problem gelöst.
Tyler Rafferty
Vielen Dank dafür 1. Alle sagen "Füge die Abfrage vor dem Bootstrap hinzu". aber es war so. Dies ist die Antwort, die erst nach mehr als einer Stunde funktioniert hat!
MaNTiS
1
Das hat mir sehr geholfen. Irgendeine Idee, warum dieses Update benötigt wird?
Brack
1
Diese Lösung hat bei mir funktioniert. Es stellte sich heraus, dass ich Bootstrap zweimal auf meiner Site importiert hatte. Nachdem ich es nur einmal importiert hatte, funktionierte es ohne das Update in dieser Lösung.
harschpatel991
27

100% Arbeitslösung

Platzieren Sie einfach zuerst Ihren JQuery-Link

Beispiel Richtig 

<script src="jquery/jquery.js"></script>
<script type="text/javascript" src='js/bootstrap.min.js'></script>
<link rel="stylesheet" href="css/bootstrap.css" />

Beispiel falsch!

<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
quelle
Hat in meinem Fall nicht funktioniert. Musste die Lösung von Iwan B. verwenden.
Toddmo
1
@Nabin Es funktioniert, weil wir zuerst jquery und dann bootstrap laden müssen, da bootstrap jquery verwendet
Siddaram H
@toddmo Es funktioniert, überprüfen Sie einfach die JQuery, Bootstrap und CSS korrekt geladen oder nicht von der Registerkarte networy in Google Crome Dbugger
LMK
12

Setzen Sie den Link jquery js wie folgt vor den Link jstraery js:

<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>

anstatt:

<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
Seyibabs
quelle
Put the jquery css ...>Put the jquery js ...
Allcaps
2
Ihre Worte sind korrekt, aber die Codeblöcke sind das Gegenteil von dem, was Sie sagen.
Astra Bear
4

Laut getBootstrap.com basieren Dropdowns auf der Drittanbieter-Bibliothek Popper.js. Wenn das Dropdown-Menü nicht mit einem Klick funktioniert, sondern nur mit dem Hover des Dropdowns, schließen Sie popper.js, bootstrap.js und bootstrap.css ein. Das Nichteinschließen von popper.js vor dem Einschließen von Bootstrap-Bundles könnte einer der Gründe sein.

<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
quelle
1
Für die Version 4 ist dies die Antwort, die eine große Änderung darstellt, wenn wir nur Jquery und Bootstrap in unsere Projekte einbeziehen.
Vindic
1
Ja, die Reihenfolge ist wirklich wichtig.
Nikilmeth
Dies ist derjenige, der für mich gearbeitet hat. Kopierte die gleichen Codes von der Bootstrap-Seite, aber dies ist die richtige Reihenfolge, in der sie sein sollten.
DuckRodgers
3

Ich war damit konfrontiert, als ich ASP .NET Forms verwendete. Die Lösung, die ich verwendet habe, war das Löschen oder Auskommentieren von jQuery- und Bootstrap-Referenzen <asp:ScriptManager runat="server">auf der Masterseite. Es scheint, dass dies zu einem Konflikt mit den jQuery- und Bootstrap-Referenzen führt, die Sie in die <header>.

Mohammad AlShaabi
quelle
2

Falls immer noch jemand mit dem gleichen Problem konfrontiert ist, überprüfen Sie in Ihrem Browser die Seitenquelle Ihrer Ansicht , um zu überprüfen, ob alle JQuery- und Bootstrap-Dateien geladen sind und die Pfade zur Datei korrekt sind. Am wichtigsten! Stellen Sie sicher, dass Sie die neueste stabile JQuery-Datei verwenden.

Munam Yousuf
quelle
2

Vielleicht kann jemand da draußen davon profitieren:

Zusammenfassung (aka tl; dr)

Bootstrap-Dropdowns wurden aufgrund des Upgrades von django-bootstrap3Version 6.2.2auf nicht mehr ausgeführt 11.0.0.

Hintergrund

Wir haben ein ähnliches Problem bei einer Legacy- djangoSite festgestellt, die stark von bootstrapThrough abhängt django-bootstrap3. Die Site hatte immer gut funktioniert und dies auch weiterhin in der Produktion, jedoch nicht auf unserem lokalen Testsystem. Es gab keine offensichtlichen verwandten Änderungen im Code, daher war ein Abhängigkeitsproblem höchstwahrscheinlich.

Symptome

Beim Besuch der Site auf dem lokalen Django-Testserver sah es auf den ersten Blick vollkommen in Ordnung aus: Stil / Layout bootstrapwie erwartet, einschließlich der Navigationsleiste. Alle Dropdown-Menüs konnten jedoch nicht gelöscht werden.

Keine Fehler in der Browserkonsole. Alle statischen Daten jsund cssDateien wurden erfolgreich geladen, und die Funktionen anderer Pakete, auf die Sie jquerysich verlassen, funktionierten wie erwartet.

Lösung

Es stellte sich heraus, dass das django-bootstrap3Paket in unserer lokalen Python-Umgebung auf die neueste Version aktualisiert wurde 11.0.0, während die Site mit erstellt wurde 6.2.2.

Ein Rollback, um django-bootstrap3==6.2.2das Problem für uns zu lösen, obwohl ich keine Ahnung habe, was genau es verursacht hat.

djvg
quelle
1

Ich benutze Rails 4.0 und bin auf das gleiche Problem gestoßen

Hier ist meine Lösung, die den Test bestanden hat

zu Gemfile hinzufügen

gem 'bootstrap-sass'

Lauf

bundle install

Fügen Sie dann zu app / assets / javascripts / application.js hinzu

//= require bootstrap

Dann sollte das Dropdown funktionieren

Chris 'Lösung funktioniert übrigens auch bei mir.

Aber ich denke, es entspricht weniger der Idee der Asset-Pipeline

user1143669
quelle
0

Es sieht so aus, als ob für Rails 4 noch mehr zu tun ist.

  1. In dir Gemfile hinzufügen.

    Edelstein 'Bootstrap-Sass', '~> 3.2.0.2'

wie hier gesehen

  1. Als nächstes müssen Sie laufen

    $ Bundle installieren

Dies ist der Teil, den niemand erwähnt hat

Öffnen Sie die Datei config / application.rb

  1. Fügen Sie dies kurz vor dem vorletzten Ende hinzu

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

wie hier zu sehen, etwa 20% auf der Seite.

  1. Erstellen Sie als Nächstes eine Datei custom.css.scss in diesem Verzeichnis

    App / Assets / Stylesheets

wie hier etwas weiter unten von der obigen Aufgabe zu sehen

  1. In dieser Datei enthalten

    @import "bootstrap";

Stoppen Sie jetzt Ihren Server und starten Sie neu, und alles sollte gut funktionieren.

Ich habe versucht, Bootstrap ohne Verwendung eines Edelsteins auszuführen, aber es hat bei mir nicht funktioniert.

Hoffe das hilft jemandem!

Wes Duff
quelle
0

Ich denke, es ist die Frage der Route Ihrer Routendatei. Weder der Bootstrap noch die JQuery-Datei.

Alvian Casablancas
quelle
0

In meinem Fall wurde das Problem durch Deaktivieren von Chrome Extensions behoben. Ich habe sie nacheinander aus Chrome entfernt, bis ich den Schuldigen gefunden habe.

Da ich der Autor der beleidigenden Chrome-Erweiterung bin, sollte ich die Erweiterung besser reparieren!

toddmo
quelle
0

Meine Bootstrap-Version zeigte auf 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>

geändert zu 4-beta

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
        integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
        crossorigin="anonymous"></script>

und es fing an zu arbeiten

Siddaram H.
quelle
0

Das Problem ist, dass href href = "#" ist. Sie müssen href = "#" in allen Tags entfernen

Victor Jimenez
quelle
0

Für Bootstrap 4 benötigen Sie eine zusätzliche Bibliothek. Wenn Sie Ihre Browserkonsole lesen, gibt Bootstrap tatsächlich eine Fehlermeldung aus, die Sie darüber informiert, dass Sie sie benötigen, damit das Dropdown-Menü funktioniert.

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

In Winkelprojekten fügen wir die folgenden Zeilen hinzu: angle-cli.json oder angle.json:

      "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"

  ],
ATEF CHAREF
quelle
0

Ich habe alle oben genannten Antworten ausprobiert und die einzige Version, die für mich funktioniert, ist die jquery 1.11.1 . Ich habe es mit allen anderen Versionen 1.3.2, 1.4.4, 1.8.2, 3.3.1 versucht und das Dropdown-Menü für die Navigationsleiste funktioniert nicht.

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

Wenn Sie mit dem Problem in Ruby on Rails konfrontiert sind, bietet die Bootstrap Ruby Gem-Readme-Datei die umfassende Lösung .

oder kurz:

  1. umbenennen application.cssinapplication.scss
  2. hinzufügen @import "bootstrap";
  3. hinzufügen gem 'jquery-rails', es Gemfilesei denn, es existiert.
  4. hinzufügen //= require jquery3 //= require popper //= require bootstrap //= require bootstrap-sprockets zu application.js.
Esmaeil MIRZAEE
quelle