Question

我最近使用bootstrap将折叠的导航栏添加到我的网站。问题是当我点击汉堡包菜单时它不会打开。

我已经查看了有关此问题的主题并查看了他们提供的解决方案，但这些解决方案似乎都不适用于我。

以下是我的代码的一部分：

＆＃13;

<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title> Title </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:300,400">

    <style>
      .container-fluid {
        padding: 0px !important;
      }

      .row {
        margin: 0px !important;
      }

      /**** navigatie ****/

      .navigatie {
        -webkit-box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.10);
        -moz-box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.10);
        -ms-box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.10);
        -o-box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.10);
        box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.10);
      }

      .navbar-brand {
        padding: 0px;
      }

      @media (max-width: 767px) {
        .navbar-default .navbar-brand {
          height: 60px !important;
        }
      }

      .navbar-default .navbar-brand {
        background-color: #D33E2A;
        color: #F8F8F8;
        position: absolute;
        line-height: 60px;
        text-align: center;
        height: 90px;
        width: 60px;
        font-family: "Times New Roman", Times, serif;
        font-size: 50px;
      }

      .navbar-default .navbar-brand:hover,
      .navbar-default .navbar-brand:focus {
        color: #F8F8F8 !important;
        background-color: #D33E2A;
      }

      .navbar-default .navbar-brand>img {
        padding: 7px 14px;
      }

      .navigatie .nav >li >a {
        padding-top: 25px;
        padding-bottom: 25px;
        padding: 20px;
        font-family: 'Raleway', sans-serif;
        font-size: 18px;
        font-weight: 300;
      }
      .navigatie .navbar-toggle {
        padding: 10px;
        padding-top: 15px;
        padding-bottom: 15px;
        border: 0px;
      }

      .navbar-header{
        font-size: 16px;
      }

      .navbar-default .navbar-toggle .icon-bar {
        background-color: #403E40;
      }

      .navbar-header .navbar-toggle:hover .icon-bar,
      .navbar-header .navbar-toggle:focus .icon-bar {
        background-color: #D33E2A;
      }

      .navbar-header .navbar-toggle:hover,
      .navbar-header .navbar-toggle:focus {
        background-color: #F8F8F8;
      }

      .navbar-alignit .navbar-header {
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
        height: 50px;
      }

      .navbar-alignit .navbar-brand {
        top: 50%;
        display: block;
        position: relative;
        height: auto;
        -webkit-transform: translate(0,-50%);
        -moz-transform: translate(0,-50%);
        -ms-transform: translate(0,-50%);
        -o-transform: translate(0,-50%);
                transform: translate(0,-50%);
        margin-right: 15px;
        margin-left: 15px;
      }

      body {
        font-family: "Raleway";
        background-color: #F5F5F5;
      }

      /* navbar */
      .navbar-default {
          background-color: #F8F8F8;
          border: 0px;
      }

      /* link */
      .navbar-default .navbar-nav > li > a {
          color: #403E40;
      }
      .navbar-default .navbar-nav > li > a:hover,
      .navbar-default .navbar-nav > li > a:focus {
          color: #D33E2A;
      }
      .navbar-default .navbar-nav > .active > a, 
      .navbar-default .navbar-nav > .active > a:hover, 
      .navbar-default .navbar-nav > .active > a:focus {
          color: #D33E2A;
          background-color: transparent;
      }
      .navbar-default .navbar-nav > .open > a, 
      .navbar-default .navbar-nav > .open > a:hover, 
      .navbar-default .navbar-nav > .open > a:focus {
          color: #403E40;
          background-color: #D5D5D5;
      }

    </style>   
  </head>

  <body>
    <nav class="navbar navbar-default navbar-fixed-top navigatie">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigatie">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="http://www.google.be">T</a>
        </div>
        <div class="navbar-collapse collapse" id="navigatie">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="http://www.google.be">Home</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
      </div>
    </nav>
    
    <script href="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

  </body>
</html>

＆＃13;

我认为我确保数据目标是正确的，jquery在引导程序js之前加载，控制台没有错误，...

请帮助，非常感谢！

Answer 1

底部的脚本应为src而不是href

＆＃13;

<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title> Tom Dirix - Multimedia Designer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:300,400">

    <style>
      .container-fluid {
        padding: 0px !important;
      }

      .row {
        margin: 0px !important;
      }

      /**** navigatie ****/

      .navigatie {
        -webkit-box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.10);
        -moz-box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.10);
        -ms-box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.10);
        -o-box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.10);
        box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.10);
      }

      .navbar-brand {
        padding: 0px;
      }

      @media (max-width: 767px) {
        .navbar-default .navbar-brand {
          height: 60px !important;
        }
      }

      .navbar-default .navbar-brand {
        background-color: #D33E2A;
        color: #F8F8F8;
        position: absolute;
        line-height: 60px;
        text-align: center;
        height: 90px;
        width: 60px;
        font-family: "Times New Roman", Times, serif;
        font-size: 50px;
      }

      .navbar-default .navbar-brand:hover,
      .navbar-default .navbar-brand:focus {
        color: #F8F8F8 !important;
        background-color: #D33E2A;
      }

      .navbar-default .navbar-brand>img {
        padding: 7px 14px;
      }

      .navigatie .nav >li >a {
        padding-top: 25px;
        padding-bottom: 25px;
        padding: 20px;
        font-family: 'Raleway', sans-serif;
        font-size: 18px;
        font-weight: 300;
      }
      .navigatie .navbar-toggle {
        padding: 10px;
        padding-top: 15px;
        padding-bottom: 15px;
        border: 0px;
      }

      .navbar-header{
        font-size: 16px;
      }

      .navbar-default .navbar-toggle .icon-bar {
        background-color: #403E40;
      }

      .navbar-header .navbar-toggle:hover .icon-bar,
      .navbar-header .navbar-toggle:focus .icon-bar {
        background-color: #D33E2A;
      }

      .navbar-header .navbar-toggle:hover,
      .navbar-header .navbar-toggle:focus {
        background-color: #F8F8F8;
      }

      .navbar-alignit .navbar-header {
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
        height: 50px;
      }

      .navbar-alignit .navbar-brand {
        top: 50%;
        display: block;
        position: relative;
        height: auto;
        -webkit-transform: translate(0,-50%);
        -moz-transform: translate(0,-50%);
        -ms-transform: translate(0,-50%);
        -o-transform: translate(0,-50%);
                transform: translate(0,-50%);
        margin-right: 15px;
        margin-left: 15px;
      }

      body {
        font-family: "Raleway";
        background-color: #F5F5F5;
      }

      /* navbar */
      .navbar-default {
          background-color: #F8F8F8;
          border: 0px;
      }

      /* link */
      .navbar-default .navbar-nav > li > a {
          color: #403E40;
      }
      .navbar-default .navbar-nav > li > a:hover,
      .navbar-default .navbar-nav > li > a:focus {
          color: #D33E2A;
      }
      .navbar-default .navbar-nav > .active > a, 
      .navbar-default .navbar-nav > .active > a:hover, 
      .navbar-default .navbar-nav > .active > a:focus {
          color: #D33E2A;
          background-color: transparent;
      }
      .navbar-default .navbar-nav > .open > a, 
      .navbar-default .navbar-nav > .open > a:hover, 
      .navbar-default .navbar-nav > .open > a:focus {
          color: #403E40;
          background-color: #D5D5D5;
      }

    </style>   
  </head>

  <body>
    <nav class="navbar navbar-default navbar-fixed-top navigatie">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigatie">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="http://www.tomdirix.be">T</a>
        </div>
        <div class="navbar-collapse collapse" id="navigatie">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="http://www.tomdirix.be">Home</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
      </div>
    </nav>
    
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

  </body>
</html>

＆＃13;

折叠的boostrap导航栏无法打开

1 个答案: