title: Using Dropdowns with Jade and Bootstrap gives me $(".dropdown-toggle").dropdown is not a function
body: <p>I'm trying to get a Bootstrap dropdown working with my Jade layout. But actually I'm getting this error when I'm trying to execute <em>$(".dropdown-toggle").dropdown</em> in my Jade-File: </p>
  
  <pre><code>$ is undefined 
  $(".dropdown-toggle").dropdown is not a function
  </code></pre>
  
  <p>Why do I get this error message?</p>
  
  <p><strong>layout.jade</strong></p>
  
  <pre><code>!!! 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
  </code></pre>
  
  <p><strong>index.jade</strong></p>
  
  <pre><code>  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()
  </code></pre>