可折叠切换不起作用

Question

我一直在寻找解决方案，但失败了。我为这样一个新手问题提前道歉。单击时切换不会展开为菜单项。我有这个工作在“主页”，但不能让它这样做的链接页面。代码与功能切换中的代码几乎相同，都是页面末尾主体中的java脚本。任何帮助都将不胜感激。

<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-3" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
 </div>

   <!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-collapse" id="collapse-3">
 <ul class="nav navbar-nav">
  <li><a href="../Lark_home_page2.html">Home</a></li>
  <li><a href="../Lark_User_Objects.zip">Download</a></li>
  <li><a href="../Lark_tutorials/Lark_tutorials.html">Tutorials</a></li>
  <li><a href="Lark_resources.html">Resources</a></li>
  <li><a href="mailto:lark.spectral.light@gmail.com">Contact Us</a></li>
  </ul>
  </div><!-- /.navbar-collapse -->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="js/jquery-1.11.2.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.min.js"></script>

Answer 1

您缺少<nav class="navbar navbar-default"></div>包装器：

​

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
 body {
  margin: 10px;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav class="navbar navbar-default"> <!-- you are missing this line-->
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="../Lark_home_page2.html">Home</a>
        </li>
        <li><a href="../Lark_User_Objects.zip">Download</a>
        </li>
        <li><a href="../Lark_tutorials/Lark_tutorials.html">Tutorials</a>
        </li>
        <li><a href="Lark_resources.html">Resources</a>
        </li>
        <li><a href="mailto:lark.spectral.light@gmail.com">Contact Us</a>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->

  </div><!-- you are missing this line-->

​