css - Bootstrap collapse js file giving error -
i have following test code:
<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 used toggle 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> <!-- sure leave brand out there if want shown --> <a class="brand" href="#">project name</a> <!-- want hidden @ 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>
i'm trying test out collapsable menu shown here:
http://twitter.github.io/bootstrap/components.html#navbar
i've downloaded boostrap responsive css file per instructions, , collapse.js file. page loads file, menu showing. when shrink browser size, menu collapses..and button appears. can't open menu. whenever click on button display collapsed menu, following error:
-- [19:08:40.348] typeerror: $ undefined @ https://myserver/mysite/assets/js/bootstrap-collapse.js:126
line 126 of file looks this:
$.fn.collapse = function (option) {
i'm not sure i'm doing wrong. guesstions appreciated.
edit 1
i've added in missing jquery.js file hasn't resolved issue. includes @ bottom of page looks this:
<script src="assets/js/jquery.js"></script> <script src="assets/js/bootstrap-collapse.js"></script>
the $
jquery function , needs included before bootstrap-collapse.js.
try sequence
<script src="assets/js/jquery.js"></script> <script src="assets/js/bootstrap-collapse.js"></script>
Comments
Post a Comment