Using Dropdowns with Jade and Bootstrap gives me $ (". Dropdown-toggle"). Dropdown is not a function

Question

I am trying to get a Bootstrap dropdown that works with Jade layout. But actually I get this error when I try to execute $ (". Dropdown-toggle"). Dropdown in my jade file:

$ is undefined $(".dropdown-toggle").dropdown is not a function 

Why do I need this error message?

layout.jade

 !!! 5 html head title= title link(rel='stylesheet', href='/lib/bootstrap/css/bootstrap.min.css') script(src='lib/bootstrap/js/bootstrap.min.js') script(src='lib/jquery/jquery-1.7.1.min.js') meta(name='viewport', content='width=device-width', initial-scale='1.0') body!= body 

index.jade

  div.navbar.navbar-fixed-top div.navbar-inner div.container a(data-toggle='collapse',data-target='.nav-collapse').btn.btn-navbar a(href='#').brand #{title} div.nav-collapse ul.nav li.active a(href='#') Home li a(href='#') Blog li a(href='#') Contact li(id='menu1').dropdown a(data-toggle='dropdown', href='#menu1').dropdown-toogle Dropdown b.caret ul.dropdown-menu li a(href='#') Test li a(href='#') Test2 script $('.dropdown-toggle').dropdown() 

Answer 1

You need to load the jQuery core before loading -

 script(src='lib/jquery/jquery-1.7.1.min.js') script(src='lib/bootstrap/js/bootstrap.min.js')