javascript - 可折叠切换不起作用

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-->