引导导航下拉菜单不起作用答案

【问题标题】：Bootstrap nav dropdown menu is not working引导导航下拉菜单不起作用
【发布时间】：2018-10-08 06:44:13
【问题描述】：

我的 Bootstrap 下拉菜单无法正常工作。我在网上查看过，似乎没有一个解决方案可以解决我的问题。我目前正在为我的 css 和 javascripts 使用外部资源，以防本地资源无法正常工作。有任何想法吗？这是我整个页面的翡翠代码。

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

【问题讨论】：

你试过在 jQuery 之后加载 bootstrap 吗？
哇，成功了，谢谢！
Bootstrap javascript 依赖 jQuery 工作。

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

答案由 cmets 中的 adeneo 提供。

在加载bootstrap JavaScript之前需要先加载jquery JavaScript，因为后者依赖于前者：

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")

【讨论】：