2014-11-06 5 views
0

Я пытаюсь просмотреть результат следующего примера код из книги O'Reilly по Bootstrap. Я видел несколько других сообщений по этой теме, но ни один из них не был объяснил следующее small example. Кажется, что класс выпадающего меню предотвращает появление неупорядоченного списка от , несмотря на то, что я включил файлы bootstrap css и js.Twitter Bootstrap: класс выпадающего меню не работает

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> 
    <li><a tabindex="-1" href="#">Action</a></li> 
    <li><a tabindex="-1" href="#">Another action</a></li> 
    <li><a tabindex="-1" href="#">Something else here</a></li> 
    <li class="divider"></li> 
    <li><a tabindex="-1" href="#">Separated link</a></li> 
</ul> 

В следующем примере кода из книги также does not work in JSFiddle (кнопка показывает вверх, но когда я нажмите не появляется меню):

<!-- Single button --> 
<div class="btn-group"> 
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
     Action <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" role="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><a href="#">Separated link</a></li> 
    </ul> 
</div> 

Спасибо.

ответ

2

Ваш код действителен. Убедитесь, что вы включили jquery, поскольку выпадающее меню требует его работы.

Jquery

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Jquery UI (В случае, если вы хотите)

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" /> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> 

Это еще один действительный ниспадающее к испытанию.

<div class="btn-group"> 
     <button class="btn btn-default">Action</button> <button data-toggle="dropdown" class="btn btn-default dropdown-toggle"><span class="caret"></span></button> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li class="disabled"><a href="#">Another action</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Something else here</a></li> 
     </ul> 
    </div> 
+0

Благодарим вас за ответ. Я добавил JQuery Core, и теперь мой последний пример, а также пример, который вы опубликовали. Тем не менее, поскольку этот [JSFiddle фрагмент демонстрирует] (http://jsfiddle.net/ffbwam70/3/), первая партия кода все еще не работает, даже если я добавлю JQuery UI в список включенных вечных ресурсов. Где я иду не так? Благодарю. –

+1

Насколько я могу судить, пример, который они дают, неверен. –

+0

Спасибо, но как это можно исправить? –