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

Question

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

我正在尝试将导航栏添加到我的 layout.jade 文件中。它似乎添加了导航栏，但它不能正常工作。当它崩溃时，我无法单击按钮来切换链接列表。下拉链接也不起作用。我在 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.

感谢您提前抽出时间，如果有任何我应该包含的更多信息会更有帮助，请告诉我，

此致 Fred K

编辑：我在 layout.jade 的第 5 行和第 8 行将 href 更改为 src，正如下面的用户 oddarriba 所告知的，我还缩进了源文件引用以将它们包含在行首中layout.jade.

中的 5-8

答案：

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

Answer 1

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

要正确加载 jQuery 和 Bootstrap CSS，请使用脚本标记的 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

希望对您有所帮助！

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

I am having issues with my navigation menu. I am using Bootstrap 3, JQuery 2.3.1 , Jade , ExpressJS, and Node.js

jquery

node.js

express

twitter-bootstrap-3

pug