wake-up-neo.com

Das Bootstrap Dropdown-Menü funktioniert nicht

Ich habe Probleme, meine Dropdowns zum Laufen zu bringen. Ich kann die Navigationsleiste perfekt anzeigen lassen, aber wenn ich auf "Dropdown" (eines von beiden) klicke, wird das Dropdown-Menü nicht angezeigt. Ich habe versucht, in anderen Beiträgen nachzuschauen, aber nichts, was die Probleme eines jeden behoben hat, hat geholfen. Ich habe die Quelle direkt von der Bootstrap-Website kopiert, aber ich scheine es nicht zu schaffen, dass sie auf meinem Computer funktioniert. Hat jemand Ideen? Ich habe es seit einer Stunde angestarrt und scheint nicht herauszufinden, was das Problem ist.

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

javascriptjqueryhtmlcsstwitter-bootstrap
79
user2540528

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.

124
Chris

Ich hatte ein Bootstrap + Rails-Projekt, und das Dropdown-Verfahren funktionierte einwandfrei ..

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

$(document).ready(function() {
    $(".dropdown-toggle").dropdown();
});
96
Iwan B.

100% Arbeitslösung  

setzen Sie einfach Ihren Jquery-Link vor allen Js- und CSS-Links

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>
22
Hidayat ullah

Setzen Sie den jquery-js-Link vor dem bootstrap-js-Link wie folgt:

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

Ich habe dies während der Verwendung von ASP .NET Forms festgestellt. Die von mir verwendete Lösung bestand darin, jQuery- und Bootstrap-Referenzen aus dem <asp:ScriptManager runat="server"> auf der Masterseite zu löschen oder zu kommentieren. Es scheint, dass ein Konflikt mit den jQuery- und Bootstrap-Referenzen entsteht, die Sie in den <header> einfügen.

2
Mohammad AlShaabi

Vielleicht kann jemand da draußen davon profitieren:

Zusammenfassung (a.k.a. tl; dr)

Bootstrap-Dropdowns wurden aufgrund eines Upgrades von Django-bootstrap3-Version 6.2.2 auf 11.0.0 nicht mehr heruntergefahren.

Hintergrund

Wir hatten ein ähnliches Problem in einer älteren Django-Site, die stark von bootstrap bis Django-bootstrap3 abhängig ist. Die Site hat immer gut funktioniert und hat dies auch in der Produktion getan, aber nicht mit unserem lokalen Testsystem. Es gab keine offensichtlichen verwandten Änderungen im Code, daher war ein Abhängigkeitsproblem höchst wahrscheinlich. 

Symptome

Beim Besuch der Website auf dem local Django-Testserver sah es perfekt aus. Auf den ersten Blick: Stil/Layout mit bootstrap wie erwartet, einschließlich der Navigationsleiste. Es konnten jedoch nicht alle Dropdown-Menüs angezeigt werden.

Keine Fehler in der Browserkonsole. Alle statischen js- und css-Dateien wurden erfolgreich geladen, und die Funktionalität aus anderen Paketen, die auf jquery angewiesen waren, funktionierte wie erwartet. 

Lösung

Es stellte sich heraus, dass das Django-bootstrap3-Paket in unserer lokalen Python-Umgebung auf die neueste Version 11.0.0 aktualisiert wurde, während die Website mit 6.2.2 erstellt wurde. 

Das Zurücksetzen auf Django-bootstrap3==6.2.2 hat das Problem für uns gelöst, obwohl ich keine Ahnung habe, was genau es verursacht hat.

1
djvg

Falls noch immer dasselbe Problem auftritt, überprüfen Sie in Ihrem Browser Ihre view Page source , 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.

1
Munam Yousuf

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

0
Alvian Casablancas

Ich verwende Rails 4.0 und stieß auf das gleiche Problem

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

zu Gemfile hinzufügen

gem 'bootstrap-sass'

lauf

bundle install

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

//= require bootstrap

Dann sollte das Dropdown funktionieren

Chris 'Lösung funktioniert übrigens auch für mich.

Aber ich denke, es ist weniger konform mit der Idee der Asset-Pipeline

0
user1143669

Laut getBootstrap.com basieren Dropdown-Listen auf der Drittanbieter-Bibliothek Popper.js. Wenn also das Dropdown-Menü nicht beim Klicken funktioniert, sondern nur für den Hover des Dropdowns, dann sind dies Popper.js, Bootstrap.js und Bootstrap.css. Wenn Popper.js vor dem Einschließen von Bootstrap-Bundles nicht eingeschlossen wurde, könnte dies 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/

0
nikhilmeth

Es scheint mehr zu tun für Rails 4.

  1. In deinem Gemfile hinzufügen.

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

wie hier gesehen

  1. Als nächstes musst du laufen 

    $ bundle install

Dies ist der Teil, den niemand erwähnt hat

Öffnen Sie die Datei config/application.rb

  1. fügen Sie dies direkt vor dem vorletzten Ende hinzu

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

wie hier zu sehen ungefähr 20% weiter unten.

  1. Als nächstes erstellen Sie eine custom.css.scss-Datei in diesem Verzeichnis

    app/Assets/Stylesheets

wie hier zu sehen etwas weiter von der obigen Aufgabe entfernt

  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 Edelstein auszuführen, aber es funktionierte nicht für mich.

Hoffe das hilft jemandem raus!

0
Wes Duff

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>

in 4-Beta geändert

<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

0
Siddaram H

Ich habe alle obigen Antworten ausprobiert und die einzige Version, die für mich arbeitet, ist die jquery 1.11.1 . Ich habe es mit allen anderen Versionen 1.3.2, 1.4.4, 1.8.2, 3.3 versucht .1 und navbar dropdown funktioniert nicht.

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

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

0
Victor Jimenez

In meinem Fall wurde das Problem dadurch behoben, dass Chrome Extensions deaktiviert wurde. Ich habe sie einzeln aus Chrome entfernt, bis ich den Täter gefunden habe.

Da ich der Autor der anstößigen Chrome-Erweiterung bin, denke ich, sollte ich die Erweiterung besser reparieren!

0
toddmo

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 Dropdown ausgeführt werden kann.

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

in eckigen Projekten fügen wir die Zeilen angle-cli.json oder angle.json hinzu:

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

  ],
0
ATEF CHAREF