Il menu a discesa Bootstrap non funziona

Question

Sto iniziando a sperimentare con Bootstrap, ma non riesco a far funzionare la funzione dropdown di js come fa nel loro documento.

Il codice che sto usando è la fonte di uno dei nodi di dropdown di esempio sul proprio sito. data-toggle="dropdown" viene utilizzato sui collegamenti e tutto è come si dice dovrebbe essere. Chiunque abbia una nuova serie di occhi e più esperienza sa cosa sta succedendo? http://cssdeck.com/labs/pipw6ahd

<link class="cssdeck" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css"> 


<div id="navbar-example" class="navbar navbar-static"> 
<div class="navbar-inner"> 
<div class="container" style="width: auto;"> 
<a class="brand" href="#">Project Name</a> 
    <ul class="nav" role="navigation"> 
    <li class="dropdown"> 
     <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
     <ul class="dropdown-menu" role="menu" aria-labelledby="drop1"> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
     <li role="presentation" class="divider"></li> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> 
    </ul> 
    </li> 

    <li class="dropdown open"> 
     <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a> 
     <ul class="dropdown-menu" role="menu" aria-labelledby="drop2"> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
     <li role="presentation" class="divider"></li> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> 
     </ul> 
    </li> 
    </ul> 
    <ul class="nav pull-right"> 
    <li id="fat-menu" class="dropdown"> 
     <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a> 
     <ul class="dropdown-menu" role="menu" aria-labelledby="drop3"> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
     <li role="presentation" class="divider"></li> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> 
     </ul> 
    </li> 
    </ul> 
</div> 
</div> 
</div> 

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/bootstrap.min.jss"></script> 

Answer 1

penso che si dispone di un errore di battitura nel modo siete tra cui il bootstrap JS. Date un'occhiata a <script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/bootstrap.min.jss"></script> e notate che avete l'.jss per l'estensione e anche ... il motivo per cui il collegamento inizia con // (doppia barra) è perché manca il protocollo http: o https: e lo lasciano fuori in modo da poterlo aggiungere .

Hai anche dimenticato di includere jQuery (è un must per il JS di bootstrap funzionare) e assicurati di includerlo sopra il bootstrap JS o non funzionerà.

Ecco un violino del menu a discesa con le ossa nude che funziona con tutto incluso.

The Fiddle

HTML

<div class="dropdown"> 
    <a class="dropdown-toggle btn" data-toggle="dropdown" href="#" >Dropdown trigger</a> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> 
     <li>Item One</li> 
     <li>Item Two</li> 
    </ul> 
</div> 

Answer 2

qui sta lavorando demo

html

<div id="navbar-example" class="navbar navbar-static"> 
       <div class="navbar-inner"> 
       <div class="container" style="width: auto;"> 
        <a class="brand" href="#">Project Name</a> 
        <ul class="nav" role="navigation"> 
        <li class="dropdown"> 
         <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
         <ul class="dropdown-menu" role="menu" aria-labelledby="drop1"> 
         <li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li> 
         <li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li> 
         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
         <li role="presentation" class="divider"></li> 
         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> 
         </ul> 
        </li> 
        <li class="dropdown"> 
         <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a> 
         <ul class="dropdown-menu" role="menu" aria-labelledby="drop2"> 
         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
         <li role="presentation" class="divider"></li> 
         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> 
         </ul> 
        </li> 
        </ul> 
        <ul class="nav pull-right"> 
        <li id="fat-menu" class="dropdown"> 
         <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a> 
         <ul class="dropdown-menu" role="menu" aria-labelledby="drop3"> 
         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
         <li role="presentation" class="divider"></li> 
         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> 
         </ul> 
        </li> 
        </ul> 
       </div> 
       </div> 
      </div> 

includono css bootstrap.css

includono js :: Jquery Library e bootstrap-dropdown.js

Answer 3

Ho appena avuto lo stesso problema in Bootstrap 3.3.2, che menu a discesa non funzionavano.

Avevo incluso una versione precedente di jQuery (1.3) che non funziona con bootstrap, ho avuto questo suggerimento mentre guardavo Firefox Webdeveloper Tools (F12) in Console e l'opzione JS abilitata.

"Errore: di Sputafuoco JavaScript jQuery richiede la versione 1.9.1 o successiva"

La rimozione di questo jquery comprendono risolto il mio problema.