Bootstrap-Dropdown funktioniert nicht

81

Ich kann das Bootstrap-Dropdown nicht zum Laufen bringen. Hier ist mein HTML für Navi:

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

Und hier sind die Skripte:

<script type="text/javascript" src="js/bootstrap/bootstrap-dropdown.js"></script>
<script>
     $(document).ready(function(){
        $('.dropdown-toggle').dropdown()
    });
</script>

Was mache ich falsch? Danke für deine Antworten!

html  drop-down-menu  twitter-bootstrap 
— hjuster
quelle
Überprüfen Sie meine Antwort auf ähnliche Posting stackoverflow.com/questions/15592158/…
— Tejasvi Hegde
4
Mein Problem fehlte die Bootstrap-JS-Datei, falls dies jemand anderem hilft
— Drewdavid
Ich hatte meine aktualisiert, Gruntfile.jswodurch einige der Pfade in jsFileList... geändert wurden. Das Aktualisieren der Pfade und das Ausführen der entsprechenden Grunt-Aufgaben (grunt dev / grunt build / etc) löste mein Problem.
— Ken Prince
1
@Drewdavid Danke! Ich wurde vermisst bootstrap.min.js und jquery
— lucidbrot

Antworten:

12

Arbeitsdemo: http://codebins.com/bin/4ldqp73

Versuche dies 

<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>
— gaurang171
quelle
56
Das Dropdown-Menü in Ihrer Demo scheint nicht mehr zu funktionieren, oder das Problem liegt möglicherweise in meinem Browser.
— Noah
151

Ich hatte das gleiche Problem. Nach ein paar Stunden der Fehlersuche stellte sich heraus, dass

ich hatte 

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

Anstatt von,

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

Hoffe das hilft jemandem

— Prinz Ashitaka
quelle
1
Was ist der Unterschied?
— CodyBugstein
9
Imray registriert das Bootstrap-Skript Erweiterungen in jQuery. Wenn also jQUery nicht geladen ist, werden die Erweiterungen nie registriert.
— Amoliski
2
Ordnung ist in der Tat wichtig. Danke für die Hilfe!
— K. Land_bioinfo
Vielen Dank. Arbeitete auch für mein Angular 10-Projekt in der Datei
— angle.json
86

Ich hatte das gleiche Problem, als ich das bootstrap.min.jszweimal einbezog . Entfernte einen von ihnen und es begann zu funktionieren.

— Kubilay
quelle
1
Dies hat mein Problem behoben. Meine eckige App zog mehrere Kopien von Bootstrap durch die Schluckaufgabe, um meine bower_components
— Pakage
Dies hat mein Problem behoben. Vielen Dank
— Yudu Ban
Dies
— behebt
Es wurde für mich behoben. Vielen Dank.
— Henry A.
wirklich nervig ... mit aurelia-webpack-skeleton muss ich bootstrap.css in meine main.js importieren, aber wenn ich 'bootstrap' importiere, bekomme ich dieses seltsame Verhalten ...
— ironisch
23

Zu Ihrer Information : Wenn Sie bootstrap.js haben, sollten Sie bootstrap-dropdown.js nicht hinzufügen.

Ich bin mir über das Ergebnis mit bootstrap.min.js nicht sicher.

— Fahrenheit
quelle
2
Vielen Dank. Ich hatte sowohl die dropdown.js als auch die bootstrap.js und daher hat es nicht funktioniert. Das Entfernen der Datei dropdown.js löste das Problem.
— Nyxz
Sie sind der beste Mann, ich habe ungefähr 6 Stunden damit verbracht, um herauszufinden, wo das Problem liegt !!, nochmals vielen Dank ..
— Adel
1
Vielen Dank, mein Herr! Ich habe das gleiche Problem, aber ich habe bootstrap.jsund bootstrap.min.js.. Wenn ich letzteres entfernt habe, funktioniert es.
1
Danke - In meinem Fall hatte ich sowohl js/bootstrap.jsals auchjs/dropdown.js
— Sanjay Manohar
13

Für Ihren Stil müssen Sie die CSS-Dateien von Bootstrap einfügen, im Allgemeinen direkt vor dem </head>Element

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

Als nächstes müssen Sie die js-Dateien einfügen. Es wird empfohlen, sie am Ende des Dokuments einzufügen, im Allgemeinen bevor die </body>Seiten schneller geladen werden.

<script src="js/jquery.js"></script>        
<script src="js/bootstrap.js"></script>
— Ôûssàmâ Höûd
quelle
8

Fügen Sie die folgenden Zeilen in die Body-Tags ein.

<!-- 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>
— Shevon Silva
quelle
Danke, das hat mir Zeit gespart.
— DrewT
7

Sie müssen diese Dateien in das <head></head>von Ihrem HTML importieren .

<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>
— Martin
quelle
1
Ich habe keine Ahnung warum oder was ich falsch gemacht habe, aber diese Antwort hat es für mich getan. Danke Martin!
— dghalbr
Vielen Dank. Ich weiß auch nicht, warum dies das Problem gelöst hat. Das Menü funktionierte einwandfrei mit /js/jquery.js und /js/bootstrap.min.js, bis die Website auf einen anderen Windows-Server migriert wurde.
— Hong
5

Hast du aufgenommen jquery.js?

Vergleichen Sie auch diese Codezeile mit Ihrer:

<a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans<b class="caret"></b></a>

Siehe diese Version, die in Ordnung funktioniert.

<!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>
— Frankline
quelle
4

Sowohl Bootstrap als auch JQuery müssen enthalten sein:

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

HINWEIS: Die Version von jquery-xxxmin.j muss Version 2.xx sein !!!

— David Liao
quelle
4

Ich habe es herausgefunden und der einfachste Weg, dies zu tun, besteht darin, das CDN des Bootstrap-Links, der unter https://www.bootstrapcdn.com/ zu finden ist, und die Jquery-CDN-Skripte, die hier zu finden sind, zu kopieren und einzufügen. Https : // code.jquery.com/ und nachdem Sie die Links kopiert haben, werden die Bootstrap-Links in den HTML-Kopf eingefügt und das Jquery-Skript in den HTML-Text eingefügt, wie im folgenden Beispiel:

    <!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 rel="stylesheet" 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>

Für mich funktioniert perfekt, hoffe es funktioniert auch für dich :)

— Atdhe Kurteshi
quelle
Vielen Dank ! Verschieben, bevor die </body>Tags es an meinem Ende zum Laufen gebracht haben!
— Ryan Aquino
2

Versuchen Sie dies im Kopfbereich

<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">
— Hamza Javed
quelle
2

Hier was ich getan habe ist .....

Ich habe gerade bootstrap.min.js aus meinem Projekt entfernt und bootstrap.js hinzugefügt und es hat angefangen zu funktionieren ........

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js"
                  //"~/Scripts/bootstrap.min.js"));
— Mohit Dhawan
quelle
Hinzufügen zu #kubilay Antwort: Sie können eine einzelne Klasse mit dem Namen 'A' pro Dokument haben. .min.css / .min.js - sind im Allgemeinen dieselben CSS- und JS-Dateien, aus denen alle Leerzeichen entfernt wurden. Es macht sie kleiner und lädt schneller. Der Browser benötigt sowieso keine Leerzeichen.
— Mohit Dhawan
Entfernen Sie eine, wenn Sie beide verwendet haben
— Mohit Dhawan
2

Versuchen Sie diesen Code:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Bootstrap Tutorial</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <h1>Welcome to Bootstrap</h1>
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown button
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </div>


    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
— Nishant Ingle
quelle
1

Sie müssen widersprüchliche CSS-Dateien / -Eigenschaften überprüfen. Sie können beispielsweise festlegen, dass der Inhalt eines benutzerdefinierten Stils ".nav" an anderer Stelle Ihre eigenen CSS-Dateien deaktiviert und überprüft, ob dies funktioniert. Überprüfen Sie dann, welche Datei oder welcher benutzerdefinierte Stil die Konflikte verursacht Sie fügen die Datei bootstrap.min.js in Ihren Code ein

— Mancy
quelle
1

Ich hatte ein ähnliches Problem, nur um festzustellen , dass ich das Bootstrap-Skript zweimal hinzugefügt hatte und das zweite Bootstrap-Skript über dem jquery-Skript stand.

Lösung:

  • Stellen Sie sicher, dass bootstrap.min.js und jquery.min.js nur einmal in Ihrer Datei enthalten sind.
  • Das Skript bootstrap.min.js sollte nach jquery.min.js enthalten sein
— BK
quelle
1

Kopieren Sie sie unter jQuery <script>und Stylesheet und fügen Sie sie <link>in Ihr ein <head>, um sicherzustellen, dass Sie alle erforderlichen Dateien laden.

Es ist wichtig, dass sich Ihre JQuery- .jsDatei über dem .cssStylesheet befindet

Fügen Sie zum Testen einfach die folgende Zeile ein

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

Das Problem tritt hauptsächlich beim Laden des jQuery-Skripts auf. Stellen Sie sicher, dass Sie die Referenzen korrekt hinzufügen.

Jetzt testen

Wenn es dennoch nicht funktioniert, überprüfen Sie die Bootstrap-Website, auf der sich eine Beispielimplementierung befindet.

https://getbootstrap.com/docs/4.3/components/navbar/#supported-content

— Amir Dora.
quelle
1

Für den neuesten Bootstrap benötigen Sie Popper.js

<script src="http://code.jquery.com/jquery-1.11.0.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>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

Kopieren Sie den Link im Abschnitt "Ende des Körpers" direkt vor dem <body>Tag in " <Head>Tag".

— Sagte Muhammad Idrees
quelle
0

Ich hatte das gleiche Problem, das mich hierher gebracht hat.

Mein Problem: Ich habe die empfohlene Version von jquery 1.12.0 als meine jquery-Skriptdatei verwendet.

Lösung: Das jquery-Skript wurde durch die jquery 2.2.0-Version ersetzt.

Das hat es für mich gelöst.

— Everest Nwosu
quelle
0

Für mich war es ein CORS-Problem. Ich crossorigin="anonymous"habe Tags aus meinem Skript entfernt und es hat wieder funktioniert.

Übrigens finden Sie die neuesten Skript-Tags in der richtigen Reihenfolge immer hier: https://getbootstrap.com/

Bearbeiten: Anscheinend werden durch Hinzufügen deferzum scriptTag auch alle Bootstrap-Extras beschädigt.

— Cameron Hudson
quelle
0

Kopieren / Einfügen des durch den JS Link von der Bootstrap - Website gefolgt CSS Link hier . Dann sollte das Dropdown funktionieren.

Meine Seite sieht aus wie:

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

(Navbar von hier )

— Pro Q.
quelle
0

Mein (gleiches) Problem trat auf, als ich die CSS- und die Bootstrap-Version verwechselt habe. Ich habe Version 3 bootstrap.min.js mit Version 4.5 bootstrap.min.css verwendet

Wenn Sie kürzlich eine Reihe von CSS- und JS-Dateien in Ihren statischen Ordner geladen oder überschrieben haben, ist dies ein guter Ausgangspunkt.

Viel Glück.

— PowerAktar
quelle
0

Ich habe gerade einen JSTeil bootstrapmeiner Indexseite hinzugefügt , dann hat es funktioniert.

Fügen Sie dies ein, wenn Sie die neueste Version von Bootstrap verwenden

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
— mecdeality
quelle
Es ist eine 8+ Jahre alte Frage mit einer akzeptierten Antwort ...
— Zsolt Meszaros
@ ZsoltMeszaros Ja, ich weiß. Aber es gibt andere Menschen, die möglicherweise mit diesem Problem
— konfrontiert sind
-1

Ich hatte Setup mit Angular 7, jQuery 3.4.1, Popper 1.12.9 und Bootstrap 4.3.1, nichts funktionierte für mich unitll Ich habe diesen kleinen Hack in Stilen gemacht:

.dropdown.show .dropdown-menu {
    opacity: 1 !important;
}

HTML sieht so aus:

<nav class="navbar navbar-expand-lg navbar-dark fixed-top py-1">
 <div class="container-fluid">
    <ul class="navbar-nav">
        <li class="nav-item dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" id="dropdown-id"
                aria-expanded="false">Menu</button>
            <div class="dropdown-menu" aria-labelledby="dropdown-id">
                <a class="dropdown-item" [routerLink]='["/"]'>Main page</a>
                <a class="dropdown-item" [routerLink]='["/about"]'>About</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" [routerLink]='["/about/terms"]'>Terms</a>
                <a class="dropdown-item" [routerLink]='["/about/privacy"]'>Privacy</a>
            </div>
        </li>
     </ul>
  </div>
</nav>
— 0lukasz0
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.