Bootstrap的可折叠导航栏

Question

我的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类重复属性以及多个data-toggle="collapse" & 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。

• 最后一个问题：请勿在ul标记中再次使用data-toggle="collapse" data-target="myNavbar">。只需使用<ul class="nav navbar-nav navbar-right">

尝试运行下面的代码片段，不要忘记在您的网页引导和jQuery库。干杯!

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <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> 
 
     <a class="navbar-brand" href="#top">the company</a> 
 
    </div> 
 
    <div id="myNavbar" class="menu collapse navbar-collapse"> 
 
    <ul class="nav navbar-nav navbar-right"> 
 
     <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> 
 
<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>