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

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

3 голосов
/ 17 февраля 2012

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

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

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

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

Ответы [ 8 ]

9 голосов
/ 14 мая 2012

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

Отсутствующий бит кода был: 

$('.dropdown-toggle').dropdown()
4 голосов
/ 17 февраля 2012

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

<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/

2 голосов
/ 24 мая 2012

Обычно я забывал об одном из них:

  • правильный html
  • ссылка на jquery.js и bootstrap-dropdown.js
  • проверка, если яправильно связал его (кажется излишним, но это, безусловно, помогло мне)
  • , вызывая выпадающий список: $ ('. dropdown-toggle'). dropdown ()
1 голос
/ 17 июня 2012

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

1 голос
/ 18 февраля 2012

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

0 голосов
/ 08 ноября 2012

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

0 голосов
/ 29 октября 2012

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

0 голосов
/ 01 мая 2012

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...