jquery - 我的导航菜单有问题。我正在使用 Bootstrap 3、JQuery 2.3.1、Jade、ExpressJS 和 Node.js

Question

您好，我是 Node.js 的 Jade 模板新手。我正在尝试使用 Express 4 、 JQuery 、 Bootstrap 3 和 Jade 创建一个基本的入门应用程序。

我正在尝试将导航栏添加到我的layout.jade 文件中。似乎添加了导航栏，但它无法正常工作。当它折叠时，我无法单击切换链接列表的按钮。下 zipper 接也不起作用。当我在 Google Chrome 中检查时，没有收到任何控制台错误。

下面我包含了我的layout.jade 和index.jade 文件。

layout.jade:

    doctype html
    html
      head
        title= title
        script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js')
        link(rel='stylesheet', href='/stylesheets/style.css')    
        link(rel='stylesheet',href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css')
        script(src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js')


      body
        nav.navbar.navbar-default.navbar-fixed-top
          div.container 
            div.navbar-header 
              button(type='button', class='navbar-toggle collapsed', data-target='#bs-example-navbar-collapse-1')
                span.sr-only Toggle Navigation
                span.icon-bar
                span.icon-bar
                span.icon-bar
            a.navbar-brand(href='#') Brand
            div.collapse.navbar-collapse(id='bs-example-navbar-collapse-1')
              ul.nav.navbar-nav
                li
                  a(href='#') Link 

        block content

index.jade:

    extends layout

    block content
      h1 #{8oo8s}
      p Welcome to #{title}

Here is a link to my git-hub containing the full code repository.

Here is a link to where the application is running live on Heroku.

感谢您提前抽出宝贵的时间，如果我还需要提供更多有用的信息，请告诉我，

真诚的弗雷德·K

编辑:根据下面用户 oddarriba 的通知，我将 layout.jade 第 5 行和第 8 行的 href 更改为 src 我还缩进了源文件引用，将它们包含在布局中第 5-8 行的头部。 Jade 。

答案:

所以从我最初开始的地方有两个问题。第一个问题是在我的 JQuery 和 Boostrap.js 源标签中，我试图使用 href 来引用它们。用户 Odarriba 建议我将 href 更改为 src。这是正确的，解决了第一个问题。第二个问题出在我的导航栏语法中的某个地方。我用从 here 获得的样板代码替换了它这就解决了第二个问题。感谢大家抽出宝贵的时间。

Answer 1

我认为您在包含外部 JS 库时遇到了问题。

要正确加载 jQuery 和 Bootstrap CSS，请使用 script 标签的 src 属性，而不是链接中使用的 href。

类似于:

doctype html
html
  head
    title= title
    script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js')
    link(rel='stylesheet', href='/stylesheets/style.css')    
    link(rel='stylesheet',href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css')
    script(src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js')


  body
    nav.navbar.navbar-default.navbar-fixed-top
      div.container 
        div.navbar-header 
          button(type='button', class='navbar-toggle collapsed', data-target='#bs-example-navbar-collapse-1')
            span.sr-only Toggle Navigation
            span.icon-bar
            span.icon-bar
            span.icon-bar
            a.navbar-brand(href='#') Brand
        div.collapse.navbar-collapse(id='bs-example-navbar-collapse-1')
          ul.nav.navbar-nav
            li
              a(href='#') Link 

    block content

希望这有帮助!