2013-05-18 2 views
-1

Я следующий код теста:Bootstrap коллапс файл дает расслоение плотной ошибке

<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Ti Productions</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <!-- Le styles --> 
    <link href="assets/css/bootstrap.css" rel="stylesheet"> 
    <style type="text/css"> 
     body { 
     padding-top: 60px; 
     padding-bottom: 40px; 
     } 
    </style> 
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> 
    </head> 
<body> 

    <div class="navbar"> 
    <div class="navbar-inner"> 
    <div class="container"> 

    <!-- .btn-navbar is used as the toggle for collapsed navbar content --> 
    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </a> 

    <!-- Be sure to leave the brand out there if you want it shown --> 
    <a class="brand" href="#">Project name</a> 

    <!-- Everything you want hidden at 940px or less, place within here --> 
    <div class="nav-collapse collapse"> 
    <!-- .nav, .navbar-search, .navbar-form, etc --> 

       <ul class="nav"> 
       <li><a href="">home</a></li> 
       <li><a href="">about</a></li> 
       <li><a href="">help</a></li> 
      </ul> 
    </div> 

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

    <script src="assets/js/bootstrap-collapse.js"></script> 
    </body> 
</html> 

Я в основном пытаюсь проверить на разборное меню показаны здесь:

http://twitter.github.io/bootstrap/components.html#navbar

Я скачал файл с высоким разрешением css в соответствии с инструкциями, а также файл collapse.js. Страница загружает файл с отображением меню. Затем, когда я уменьшаю размер браузера, меню рушится .. и появляется кнопка. Но я не могу открыть меню. Всякий раз, когда я нажимаю на кнопку, чтобы отобразить меню свернутый, я получаю следующее сообщение об ошибке:

-- 
[19:08:40.348] TypeError: $ is undefined @ 
https://myserver/mysite/assets/js/bootstrap-collapse.js:126 

линии 126 этого файла выглядит следующим образом:

$.fn.collapse = function (option) { 

Я не уверен, что я делать неправильно. Любые оценки будут оценены.

EDIT 1

Я добавил недостающую jquery.js файл, но это не решило проблему. включает в нижней части страницы теперь выглядит следующим образом:

<script src="assets/js/jquery.js"></script> 
<script src="assets/js/bootstrap-collapse.js"></script> 
+0

Вы включили файлы в правильном порядке, то есть bootstrap.js, затем отзывчивый, а затем collapse.js? – baig772

+0

baig772. Спасибо за комментарий. да, я добавил в том же порядке, о котором вы упоминали ... – dot

ответ

1

$ функция JQuery и должен быть включена перед бутстраповским-collapse.js.

Попробуйте эту последовательность проверки

<script src="assets/js/jquery.js"></script> 
<script src="assets/js/bootstrap-collapse.js"></script> 
+0

Кейн, я пробовал это, но он все еще не работает. проверьте «edit 1» в моем сообщении. Благодарю. – dot

+0

Вы уверены, что ваши активы находятся в подпапке под названием «активы»? Может быть, это простое исправление добавления ведущей косой черты '/ assets'? – Kane

1

если JQuery правильно загружен или нет. В Firebug или консоли попробуйте запустить «$». Этот тип ошибок возникает, если jquery не загружается перед настраиваемым скриптом или их конфликт с другой библиотекой с использованием «$», как прототип.

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