2016-11-24 60 views
0

我最近使用引导向我的网站添加了一个折叠的导航栏。问题是,当我点击汉堡菜单时,它不会打开。折叠的助推器导航栏不会打开

我检查了我能找到的有关此问题的主题,并查看了他们提供的解决方案,但其中没有一个似乎对我有用。

这里是我的代码的一部分:

<!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 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>

您还可以检查www.tomdirix.be

直播网站,我想我已经取得了一定的数据目标正确的,jquery加载之前的引导js,控制台是错误的,...

请帮助,这将不胜感激!

回答

1

的底部脚本应该是srchref

<!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>

+0

没问题:)很高兴我帮助 – GvM