Rozwijanie listy rozwijanej nie działa

Question

Zaczynam eksperymentować z Bootstrap, ale nie jestem w stanie uzyskać funkcji rozwijanej js działającej tak, jak w swoim dokumencie.

Kod, którego używam, pochodzi z jednego z przykładowych węzłów rozwijanych w ich własnej witrynie. data-toggle="dropdown" jest używany na linkach, a wszystko jest tak, jak powinno. Ktoś, kto ma świeży wzrok i więcej doświadczenia wie, co się dzieje? 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

myślę, że masz literówkę w sposób jesteś w tym bootstrap JS. Spójrz na <script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/bootstrap.min.jss"></script> i zauważ, że masz .jss dla rozszerzenia, a także ... powodem, dla którego link zaczyna się od // (podwójnego ukośnika), jest to, że brakuje w nim protokołu http: lub https: i zostawiają go wyłączony, aby można go było dodać .

Zapomniałeś również o jQuery (jest to koniecznością dla JS bootstrap do pracy) i upewnij się, że umieścisz go powyżej JS ładowania początkowego lub nie zadziała.

Oto skrzypce z odsłoniętej kości, działającej ze wszystkim.

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

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

obejmują css bootstrap.css

obejmują js :: Jquery Library i bootstrap-dropdown.js

Answer 3

prostu miałem ten sam problem w Bootstrap 3.3.2, że Dropdowns nie działa.

Dołączyłem starszą wersję jquery (1.3), która nie działa z bootstrapem, otrzymałem tę podpowiedź patrząc na Firefox Webdeveloper Tools (F12) w opcji Console i JS enabled.

"Błąd: Bootstrap wymaga JavaScript jQuery w wersji 1.9.1 lub wyższej"

usunięcie tego jQuery obejmują rozwiązać mój problem.