Bootstrap dropdown не работает

Question

Я начинаю экспериментировать с Bootstrap, но я не могу получить функцию выпадающего js, работающую так, как это делается в их документе.

Код, который я использую, является источником одного из примеров выпадающих узлов на своем собственном сайте. data-toggle="dropdown" используется по ссылкам, и все, как они говорят, должно быть. Кто-нибудь со свежим набором глаз и большим опытом знает, что происходит? 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

Я думаю, что у вас есть опечатка в том, как вы в том числе загрузчика JS. Посмотрите на <script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/bootstrap.min.jss"></script> и обратите внимание, что у вас есть .jss для расширения, а также ... причина, по которой ссылка начинается с // (двойная слэш), связана с тем, что отсутствует протокол http: или https:, и они оставляют его, поэтому вы можете его добавить ,

Вы также забыли включить jQuery (это необходимо для работы JS Bootstrap для работы) и убедитесь, что вы включили его выше бутстрапа JS или он не будет работать.

Вот скрипка раскрытой кости кости, работающая со всем включенным.

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

здесь работает 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> 

включают CSS bootstrap.css

включают JS :: Jquery Library и bootstrap-dropdown.js

Answer 3

Я просто имел тот же вопрос в Bootstrap 3.3.2, что выпадающие не работали.

Я включил более старую версию jquery (1.3), которая не работает с загрузкой, я получил этот намек, глядя на Firefox Webdeveloper Tools (F12) в опции Console и JS.

"Ошибка: JavaScript Bootstrap требует JQuery версии 1.9.1 или выше"

Удаление этого JQuery включают решить мою проблему.