Twitter Bootstrap 2 выпадающее меню не работает

Добрый день! Я пытаюсь реализовать выпадающее меню из примеров на моем сайте. Но это не работает (выпадающее меню вообще не отображается). Я включил все необходимые файлы js и css, разметка такая же, как в документах.Twitter Bootstrap 2 выпадающее меню не работает

Вы видите, что я делаю неправильно?

<link type="text/css" href="{{ STATIC_URL }}css/bootstrap.css" rel="stylesheet"> 

<script type="text/javascript" src="{{ STATIC_URL }}js/jquery-1.7.1.min.js"></script> 

<script type="text/javascript" src="{{ STATIC_URL }}js/bootstrap.js"></script> 
<script type="text/javascript" src="{{ STATIC_URL }}js/bootstrap-dropdown.js"></script> 

... 

<body> 
<div class="navbar .navbar-fixed-top"> 
    <div class="navbar-inner"> 
     <div class="container"> 
      <a class="brand" href="/"> 
       Brand 
      </a> 

      <ul class="nav"> 
       <li class="dropdown"> 
        <a href="#fat-menu" class="dropdown-toggle" data-toggle="dropdown"> 
         Аккаунт 
         <b class="caret"></b> 
        </a> 
        <ul class="dropdown-menu" id="fat-menu"> 
         <li><a>SubLink</a></li> 
         <li class="divider"></li> 
         <li><a>SubLink</a></li> 
        </ul> 
       </li> 
      </ul> 

... 


     </div> 
    </div> 
</div>

Большое спасибо.

источник

2012-02-17 rapt0r

нет никакой подсказки, если это имеет какое-либо отношение к вашей проблеме, но я не уверен, что вам нужно включить и bootstrap.js И bootstrap-dropdown.js. В зависимости от того, что именно вы загрузили, bootstrap.js уже может включать раскрывающийся список js. – csturtz

Нет, в соответствии с документацией необходимы оба файла. – rapt0r

У меня возникла проблема, когда я включал как bootstrap.js, так и bootstrap-modal.js. Можете ли вы подтвердить, что удаление bootstrap-dropdown.js не решает проблему? – nates

Проблема заключалась в отсутствии блока js в html-файле, требуемом для определенной функции.

Пропавшие бит код был:

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

источник

2012-05-14 08:05:27 rapt0r

Какой блок скучал? Не могли бы вы уточнить, у меня тоже такая же проблема. –

Для выпадающего меню было $ ('. Dropdown-toggle'). Dropdown() – rapt0r

Спасибо рэп. В моем случае я уже собрал активы и забыл об этом. позже я добавил загрузчик, так почему у меня возникла проблема. Я просто удалил скомпилированную версию активов из общедоступного каталога, и он отлично работает. –

Вы не правильно привязок вашей основной ссылки нав ваш выпадающий список, попробуйте следующее:

<ul class="nav"> 
    <li class="dropdown" id="fat-menu"> /* notice the reference to your dropdown link #fat-menu */ 
     <a href="#fat-menu" class="dropdown-toggle" data-toggle="dropdown"> 
      Аккаунт 
      <b class="caret"></b> 
     </a> 
     <ul class="dropdown-menu"> 
      <li><a>SubLink</a></li> 
      <li class="divider"></li> 
      <li><a>SubLink</a></li> 
     </ul> 
    </li> 
</ul>

Демы: http://jsfiddle.net/u5vhS/1/

источник

2012-02-17 19:38:20

Пробовал это, но не помог :(А также пробовал без ids, как в документации. – rapt0r

@ rapt0r вот скрипка с приведенным выше кодом работает нормально: http://jsfiddle.net/u5vhS/ –

@ rapt0r скрипка с полным верхним навигационным кодом, http://jsfiddle.net/u5vhS/1/ –

Я знаю, это может показаться глупым, но при просмотре источника (через щелкните правой кнопкой мыши), правильно ли указаны адреса файлов JavaScript? Возможно, {{STATIC_URL}} неверен. Попробуйте скопировать и вставить адреса из источника в адресную строку. Убедитесь, что вы действительно видите содержимое файлов JavaScript.

источник

2012-02-18 08:28:20 Keith

Это произойдет, если вы переопределите li где-нибудь в вашем css. Например, если у вас есть другая таблица стилей с содержанием:

li { 
    list-style: none; 
    margin-bottom: 20px; 
    overflow: hidden; 
    padding-bottom: 25px; 
    position: relative; 
}

Это не сработает. Убедитесь, что конфликтов нет.

источник

2012-04-30 20:49:05 vimdude

Я обычно забывал одного из них:

собственно HTML
ссылается jquery.js и бутстрап-dropdown.js
проверка, если я связал его правильно (кажется лишним, но это, безусловно, помогло мне)
, вызывающий dropdo wn: $ ('. dropdown-toggle'). dropdown()

источник

2012-05-24 18:29:50

У меня была та же проблема. Комментируя ссылку для bootstrap-dropdown.js, она разрешила это. Мне нужен только bootstrap.min.js

источник

2012-06-17 00:14:02 SainathDK

-3

Была ли та же проблема в проекте .net (выпадающее меню вообще не отображалось), однако выборочные образцы бутстрапа работали нормально. Обновление библиотеки jQuery в моем проекте с 1.6.1 до 1.8.2 решило проблему.

источник

2012-10-28 20:08:34 Agadormis

-1

Попробуйте обновить библиотеку jQuery, она решила ту же проблему для меня.

источник

2012-11-08 19:05:06 devBen

Twitter Bootstrap 2 выпадающее меню не работает

ответ

Смежные вопросы