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

Überprüfen Sie die popper.js-Bibliothek, da ich das gleiche Problem hatte. Sie finden Bootstrap-, JQuery- und Popper-CDNs zum Dropdown unter https://getbootstrap.com/ oder kopieren Sie einfach die folgenden Skript-Tags

necheervan abdullah
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/[email protected]/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