导航栏菜单收起不打开

我的目标是编写带有几个菜单链接的网站导航栏。在小型设备上，应该出现一个菜单栏，在单击时折叠菜单链接。导航栏菜单收起不打开

我跟着YouTube教程学习如何做到这一点，并且我已经将代码与本教程中的代码进行了几次比较，但不知怎的，我的菜单并不想崩溃。

我可以确定问题不在于引导程序已加载，因为当我将YouTube教程中的代码复制到我的Codepen中时，折叠菜单工作得很好。

如果有人能看我的代码，并给我一个暗示我做错了什么，我会很感激。

<!--DOCTYPE html --> 
<head> 
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lemonada"> 
</head> 

<body> 
    <header> 
    <div class="navbar navbar-default navbar-inverse navbar-fixed-top"> 
     <div class="container"> 

     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a href="#" class="navbar-brand">Company Brand</a> 

     </div> 

     <div class="collapse navbar-collapse" id="navHeaderCollapse"> 
      <ul class="nav navbar-nav navbar-right"> 
      <li> 
       <a href="#">Menu 1</a> 
      </li> 
      <li> 
       <a href="#">Menu 2</a> 
      </li> 
      <li> 
       <a href="#">Menu 3</a> 
      </li> 
      <li> 
       <a href="#">Menu 4</a> 
      </li> 
      <li> 
       <a href="#">Menu 5</a> 
      </li> 
      <li> 
       <a href="#">Menu 6</a> 
      </li> 
      </ul> 

     </div> 

     </div> 
    </div> 
    </header> 

</body> 

<footer> 
</footer>

非常感谢提前！亲切的问候

Rysio

来源

2017-01-10 Rysio

好像你正在使用Bootstrap-这将可帮助他人，如果你可以发布更完整的代码您还没有任何CSS，CSS类的使用的样子。你有任何自定义的CSS菜单？你只使用bootstrap吗？你的html也是无效的，'

如果你在问题中贴出你的完整代码，然后有很多事情错在那里。

你必须包裹<html> 标签内的<head>和<body>标签。
将您的<footer>置于<body>之内。
我猜即使你没有发布的问题，但你必须包括你的脚本。始终在 BootStrap脚本之前包含jQuery脚本。因为bootstrap.js需要jQuery到函数。此外，它是一件好事，他们包括之前 </body>

在这里，我已经包括了CDN的脚本和CSS来表明代码是正确的。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lemonada"> 
 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
</head> 
 

 
<body> 
 

 
<header> 
 

 

 
    <div class="navbar navbar-default navbar-inverse navbar-fixed-top"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type ="button" class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse"> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
     <a href="#" class="navbar-brand">Company Brand</a> 
 

 
     </div> 
 

 

 

 
     <div class="collapse navbar-collapse" id="navHeaderCollapse"> 
 

 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li> 
 
       <a href="#">Menu 1</a> 
 
       </li> 
 
       <li> 
 
       <a href="#">Menu 2</a> 
 
       </li> 
 
       <li> 
 
       <a href="#">Menu 3</a> 
 
       </li> 
 
       <li> 
 
       <a href="#">Menu 4</a> 
 
       </li> 
 
       <li> 
 
       <a href="#">Menu 5</a> 
 
       </li> 
 
       <li> 
 
       <a href="#">Menu 6</a> 
 
       </li> 
 
      </ul> 
 

 
     </div> 
 

 
    </div> 
 
    </div> 
 

 
</header> 
 

 
<footer> 
 
</footer> 
 

 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
</body> 
 
<html>

来源

2017-01-10 12:17:26 ab29007

@Rysio如果它解决了你的问题，请不要忘记接受答案。你知道点击我答案左边的复选标记（正确的符号）。 – ab29007

嗨KittyCat！非常感谢您的回答。我处理了你提到的变化，无论如何购买折叠菜单不起作用。我没有包含bootstrap和JQuerey脚本，因为我使用的是CodePen，并且它们会自动加载到那里。当我复制一个外部代码时，折叠菜单正在工作（不加载脚本）到头部标签中）。代码是否适合你？没有发现错误？ – Rysio

codepen不会自动包含脚本。你必须使用设置来添加它们。等2-3分钟。我会在这里添加一个codepen给你看。 – ab29007

导航栏菜单收起不打开

回答

相关问题