Bootstrap-Dropdown-Menü funktioniert nicht (fällt nicht beim Klicken ab)

Ich versuche, Bootstrap in den Griff zu bekommen und wenig Erfolg zu haben. Ich versuche nur, eine lokale Version dieser Vorlage zum Laufen zu bringenBootstrap-Dropdown-Menü funktioniert nicht (fällt nicht beim Klicken ab)

http://getbootstrap.com/examples/jumbotron/

ich den HTML-Code direkt in eine HTML-Seite kopiert habe und verweisen die CSS und JS-Dateien in der gleichen Reihenfolge wie die Webseite nur Kopien mit von der neueste Download auf meinem Rechner. Es passiert jedoch nichts, wenn auf den Pfeil neben dem Dropdown geklickt wird (d. H. Kein Menü erscheint)

Ich habe versucht, den Code in einem jsfiddle zu reproduzieren, aber das ist noch schlimmer und zeigt das Menü überhaupt nicht richtig an. http://jsfiddle.net/andieje/kRX6n/

Hier ist die Ausgabe meiner Seite. Ich habe auch die Drop-Down zu

<!DOCTYPE html> 
<html> 
<head><title> 
    Untitled Page 
</title><link href="styles/bootstrap.css" rel="stylesheet" /> 
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 
     <script src="JavaScript/html5shiv.js"></script> 
     <script src="JavaScript/respond.min.js"></script> 
    <![endif]--> 
</head> 
<body> 

    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Project name</a> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</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 class="dropdown-header">Nav header</li> 
       <li><a href="#">Separated link</a></li> 
       <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
      </ul> 
      <form class="navbar-form navbar-right"> 
      <div class="form-group"> 
       <input type="text" placeholder="Email" class="form-control"> 
      </div> 
      <div class="form-group"> 
       <input type="password" placeholder="Password" class="form-control"> 
      </div> 
      <button type="submit" class="btn btn-success">Sign in</button> 
      </form> 
     </div><!--/.navbar-collapse --> 
     </div> 
    </div> 



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

<script type="text/javascript" src="JavaScript/bootstrap-dropdown.js" /> 

</body> 
</html>

Ich habe auch versucht, diesen Code hinzufügen, aber ohne Erfolg

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

Quelle

2013-08-20 user2274191

sind Sie sicher, dass die 'bootstrap.min.js' Datei ein Strich nicht über einen Zeitraum verwendet, und nicht? Ich schaue gerade auf die Quelle und benutze einen Punkt. – Kristian

hi - meine Datei wird mit einem Strich und nicht mit einem Punkt benannt. danke – user2274191

entfernen Sie einfach das type="text/javascript"

<script src="JavaScript/jquery.js" /> 
<script src="JavaScript/bootstrap-min.js" />

Hier ist das Update - http://jsfiddle.net/andieje/kRX6n/

Quelle

2013-08-21 07:12:22

Danke für deine Antwort. Ich hatte das gleiche Problem und Ihre Lösung hat funktioniert. Aber kannst du erklären, was das Problem von hainv 'text/javascript' ist? – user2243747

Dies ist eine bizarre Lösung für ein bizarres Problem (aber es hat funktioniert!) – contactmatt

es funktionierte auch für mich! Aber es hört sich komisch an haha – erginduran

Ich hatte das gleiche Problem, die Lösung funktionierte für mich, hoffe, es wird funktionieren Gleichfalls.

<script src="content/js/jquery.min.js"></script> 
<script src="content/js/bootstrap.min.js"></script> 
<script> 
    $(document).ready(function() { 
     $('.dropdown-toggle').dropdown(); 
    }); 
</script>

Bitte geben Sie die „jquery.min.js“ Datei vor „bootstrap.min.js“ Datei, wenn Sie den Auftrag mischen es wird nicht funktionieren.

Quelle

2014-04-03 14:30:33 ashishSober

Hinzufügen von $ ('. Dropdown-toggle'). Dropdown(); löste mein Problem, danke. – Murat

Die Reihenfolge scheint relevant zu sein. Flask-Bootstrap mit hat eine Jinja2 Vorlage bootstrap/base.html, die genau diese Reihenfolge hat. In meinem Fall habe ich das nicht bemerkt und die Skripte wieder in eine Untervorlage eingefügt. Dies löste das DropDown offenbar aufgrund des von AshishSober beschriebenen Bestellproblems. – bvanlew

Problem gelöst durch Hinzufügen von $ ('. Dropdown-toggle'). Dropdown(); Vielen Dank –

Fügen Sie einfach diese beiden Dateien nach dem Öffnen des Body-Tags hinzu. Beachten Sie "Nur nach Body-Tag" wo nach Body-Tag. Wenn Sie unten genannte Dateien innerhalb des body-Tags hinzufügen, sind Ihre Probleme immer noch nicht gelöst.

So fügen Sie sie nach oder vor dem Schließen des Body-Tags ... Dies funktioniert 100%. Ich habe getestet und funktioniert!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.min.js"></script>

Quelle

2015-03-19 18:52:26

-2

Ich hatte das gleiche Problem Ich entferne das folgende Skript und es funktionierte für mich.

Quelle

2016-06-24 22:20:12

Das Hinzufügen dieses Skripts zu meinem Code hat das Dropdown-Menü korrigiert.

<script> $(document).ready(function() { $('.dropdown-toggle').dropdown(); }); </script>

Quelle

2016-08-29 22:54:42

Bootstrap-Dropdown-Menü funktioniert nicht (fällt nicht beim Klicken ab)

Antwort

Verwandte Themen