简体   繁体   中英

Bootstrap nav dropdown menu is not working

I'm having trouble getting my Bootstrap dropdown menus to work. I've looked online and none of the solutions seem to fix my issue. I'm currently using external sources for my css and javascripts just incase the local ones weren't working. Any ideas? Here's my whole jade code for the page.

doctype html
html
  head(lang="en")
    meta(charset="UTF-8")
    title Login | EPS KPI Warehouse
    // CSS
    //link(href="/bootstrap/css/bootstrap.min.css", rel="stylesheet")
    script(src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js")
    script(src="http://code.jquery.com/jquery-2.1.0.min.js")
    link(href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css", rel="stylesheet")

  body
    // Navbar
    nav.navbar.navbar-default.navbar-static-top(role="navigation")
      .container-fluid
        .navbar-header
          button.navbar-toggle.collapsed(type="button", data-toggle="collapse", data-target="#navbar", aria-expanded='false', aria-controls='navbar')
            span.sr-only Toggle Navigation
            span.icon-bar
            span.icon-bar
            span.icon-bar
          a.navbar-brand(href="/", style="padding-top: 7px")
            img(src="/images/EPS_Logo.png", ,="", height="35")
          a.navbar-brand KPI Warehouse
        #navbar.navbar-collapse.collapse
          ul.nav.navbar-nav
            li.active
              a(href="/home") Home
            li.dropdown
              a.dropdown-toggle(href='#', data-toggle='dropdown', role='button', aria-expanded='false')
                | Dropdown
                span.caret
              ul.dropdown-menu(role='menu')
                li
                  a(href='#') Action
                li
                  a(href='#') Another action
                li
                  a(href='#') Something else here
                li.divider
                li.dropdown-header Nav header
                li
                  a(href='#') Separated link
                li
                  a(href='#') One more separated link
          ul.nav.navbar-nav.navbar-right
            li.dropdown
              a.dropdown-toggle(href='#', data-toggle='dropdown', role='button', aria-expanded='false')
                | Dropdown
                span.caret
              ul.dropdown-menu(role='menu')
                li
                  a(href='#') Action
                li
                  a(href='#') Another action
                li
                  a(href='#') Something else here
                li.divider
                li.dropdown-header Nav header
                li
                  a(href='#') Separated link
                li
                  a(href='#') One more separated link

Answer courtesy of adeneo in the comments.

You need to load the jquery JavaScript before you load the bootstrap JavaScript due to the latter's dependency on the former:

script(src="http://code.jquery.com/jquery-2.1.0.min.js")
script(src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js")
link(href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css", rel="stylesheet")

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM