导航栏菜单折叠未打开答案

【问题标题】：Navbar Menu Collapse not opening导航栏菜单折叠未打开
【发布时间】：2017-05-24 21:33:41
【问题描述】：

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

我按照 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

【问题讨论】：

您没有包含任何 css，css 类的使用看起来好像您正在使用 Bootstrap - 如果您可以发布更完整的代码，这将对其他人有所帮助。你有菜单的自定义CSS吗？你只使用引导程序吗？此外，您的 html 无效，<footer> 标记必须在正文中。

标签： css twitter-bootstrap navbar collapse

【解决方案1】：

如果您在问题中发布了完整的代码，那么那里有很多问题。

您必须将<head> 和<body> 标签包装在<html> 中标记。
将您的<footer> 带入<body>。
我想即使你没有在问题中发布但你必须包括你的脚本。之前总是包含 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>

【讨论】：

您好 KittyCat！非常感谢您的回答。我处理了您提到的更改，无论如何购买折叠菜单不起作用。我没有包含 bootstrap 和 JQuerey 脚本，因为我使用的是 CodePen，它们会自动加载到那里。当我复制外部代码时，折叠菜单在 head 标签中起作用（不加载脚本）。代码看起来适合您吗？没有发现错误？
codepen 不会自动包含脚本。您必须使用设置添加它们。等待 2-3 分钟。我这里加个codepen给大家看看。
但是当你点击设置时（在右边）。并转到 css，你会看到我在那里添加了引导程序和类似的 javascripts
你好 KittyCat！再次非常感谢您！我想问题是我在css中加载了引导程序，而不是在Javascript中。我非常感谢您的帮助！干杯