Bootstrap的可折叠导航栏

Question

My Bootstrap可折叠菜单无效。我无法弄清楚我的问题在哪里？

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
       <a class="navbar-brand" href="#top">the company</a>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

    </div>
    <div class="menu" id="#myNavbar" class="collapse  navbar-collapse">
    <ul class="nav navbar-nav navbar-right" data-toggle="collapse" data-target="myNavbar">
      <li class="scrollable"><a href="#about" class="active" class="scrollable">About me</a></li>
      <li class="scrollable"><a href="#portfolio">Portfolio</a></li>
      <li class="scrollable"><a href="#contact">Contact Me</a></li>
    </ul>
    </div>
  </div>
</nav>

Answer 1

您在多个div中有 class 的重复属性以及多个data-toggle="collapse"＆amp; data-target="myNavbar"。

此外，您的目标ID中包含＃，不应该：id="#myNavbar"应为id="myNavbar"

验证您的HTML并参考Docs的推荐

工作示例：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
  <div class="container-fluid">

    <div class="navbar-header">
      <a class="navbar-brand" href="#top">the company</a>
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div id="myNavbar" class="collapse navbar-collapse menu">
      <ul class="nav navbar-nav navbar-right">
        <li class="active scrollable"><a href="#about">About me</a>
        </li>
        <li class="scrollable"><a href="#portfolio">Portfolio</a>
        </li>
        <li class="scrollable"><a href="#contact">Contact Me</a>
        </li>
      </ul>
    </div>

  </div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 2

  

问题在于：

     

  
• 您的折叠导航栏层次结构。
  
• 您使用menu类的div。
  
• 语法
  

• 锚标记：<a class="navbar-brand" href="#top">the company</a>应该在button标记之后。

• 菜单类应与其他类一起使用：<div id="myNavbar" class="menu collapse navbar-collapse">，而不是<div class="menu" id="#myNavbar" class="collapse navbar-collapse">

• <div id="#myNavbar"应更改为<div id="myNavbar"。移除#，在将id添加到div时，您不需要它。

• 最后一期：请勿在{{1​​}}标记中再次使用data-toggle="collapse" data-target="myNavbar">。只需使用ul

即可

尝试运行下面的代码段，不要忘记在网页中包含Bootstrap和jQuery库。干杯！

＆＃13;

＆＃13;

<ul class="nav navbar-nav navbar-right">

＆＃13;

＆＃13;

＆＃13;