Twitter Bootstrap Dropdown-Menü funktioniert nicht

Question

Ich weiß, es gibt eine Menge Fragen wie diese auf Stack Overflow und ich habe sie angesehen, aber mein Dropdown-Menü funktioniert immer noch nicht.

Hier ist mein Code:

<div class="navbar navbar-inverse navbar-fixed-top"> 
       <div class="navbar-inner"> 
         <div class="container"> 
<ul class="nav pull-left"> 
<li><a href="#myModal" class="dropdown-toggle" data-toggle="modal" data-keyboard="false" data-backdrop="static">Login</a></li> 
<li class="dropdown" id="accountmenu"> 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#">My Account<b class="caret"></b></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Login</a></li> 
          <li><a href="#">Register</a></li> 
         </ul> 
        </li> 
         </div> 
       </div> 
</div> 

Was ist falsch daran?

EDIT

die Drop-Down-Menü So funktioniert nun mit der Antwort auf diese Frage gestellt. Wenn ich jedoch die dort genannten Skripte einschließe, funktioniert das modale Fenster nicht mehr. Und wenn ich diese Einträge kommentiere, fängt es wieder an zu arbeiten.

Hier ist der Code für mein modales Fenster:

<div class="modal hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 
    aria-hidden="true"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> 
      X</button> 
     <h3 id="myModalLabel"> 
      Enter your Credentials</h3> 
    </div> 
    <div class="modal-body"> 
     <form class="form-horizontal"> 
    <div class="control-group"> 
    <label class="control-label" for="inputEmail">Email</label> 
    <div class="controls"> 
    <input type="email" id="inputEmail" placeholder="Email"> 
    </div> 
    </div> 
    <div class="control-group"> 
    <label class="control-label" for="inputPassword">Password</label> 
</div> 
    </div> 
    <div class="control-group"> 
    <div class="controls"> 
    <label class="checkbox"> 
    <input type="checkbox"> Remember me 
    </label> 
    <a href="news.php" class="btn btn-primary">Login</a> 
    <a href="registration.php" class="btn btn-primary">Sign up</a> 
    </div> 
    </div> 
    </form> 
    </div> 
</div> 

Und das JavaScript für den Auslöser:

$('#myModal').on('hide',function(){ 
    $('.nav > li > a.modal-open-li').removeClass('modal-open-li'); 
}); 

Answer 1

scheint in jsFiddle gut zu funktionieren, hier ist ein Beispiel http://jsfiddle.net/2hGuv/

Sie Denken Sie daran, die js-Datei zu importieren. hier ist der Code mit den folgenden Dateien importiert: http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="navbar-inner"> 
     <div class="container"> 
      <ul class="nav pull-left"> 
       <li><a href="#myModal" class="dropdown-toggle" data-toggle="modal" data-keyboard="false" data-backdrop="static">Login</a> 

       </li> 
       <li class="dropdown" id="accountmenu"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">My Account<b class="caret"></b></a> 

        <ul class="dropdown-menu"> 
         <li><a href="#">Login</a> 

         </li> 
         <li><a href="#">Register</a> 

         </li> 
        </ul> 
       </li> 
     </div> 
    </div> 
</div> 

Answer 2

Überprüfen Sie, ob Sie diese in js Dateien haben: $('.dropdown-toggle').dropdown();

Überprüfen Sie, ob Sie so etwas wie dies mit dieser Sequenz haben:

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

überprüfen Sie dies: Bootstrap drop-down menus and tabbable tabs on Docpad

Answer 3

dies behoben haben für mich das Problem in meiner Funktion bereit Hinzufügen

$('.dropdown-toggle').dropdown(); 

Answer 4

Für noch jemand dieses Problem auftritt. Ich fand, dass ich mit dem Bootstrap-js Dateien zweimal (ich hatte meine Header, Body und Footer-Dateien aufgeteilt und ich sie nicht erkannt hatte, sowohl in der Fußzeile und Kopf wurde inklusive.

jemand helfen könnte.

Answer 5

I hatte ein ähnliches Problem. Und war die Ursache die falsche Reihenfolge von js Dateien in head-Tag. Richtige ist, um die jquery.min.js zuerst als bootstrap.min.js

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 

Answer 6

Für Mine, weil es war Die Reihenfolge des Hinzufügens von Skripts war nicht richtig, es sollte so aussehen:

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

Answer 7

In meinem Fall war das Problem mit der Version von jQuery. In bootstrap.js v3.3.6

if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1) || (version[0] > 2)) { 
    throw new Error('Bootstrap\'s JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3') 
    } 

Hinweis: 'Bootstrap \' s benötigt JavaScript jQuery-Version 1.9.1 oder höher, aber niedriger als Version 3 '

Ich ersetzte den Code der lokalen jQuery-Datei durch jQuery-1.11.3.js und es beginnt zu arbeiten.

Hoffe, es wird auch für Sie arbeiten.

Answer 8

In meinem Fall gab es eine Komponente über meinem Dropdown-Button, und es dauerte zu lange, bis ich zur Kenntnis genommen habe. Noob Fehler, aber es kann jemandem helfen.