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

Bootstrap nav dropdown menu is not working

本文关键字:不起作用 下拉菜单 导航      更新时间:2023-09-26

我在让引导下拉菜单工作时遇到问题。 我在网上看过,似乎没有一个解决方案可以解决我的问题。 我目前正在为我的 css 和 javascript 使用外部资源,以防本地资源不起作用。 有什么想法吗? 这是我的整个翡翠代码。

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
回答由

adeneo 在评论中提供。

在加载引导

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