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.