2015-10-28 78 views
0

我已搜索解决方案并失败。我提前为这样一个新手提出道歉问题。点击时的切换不会扩展到菜单项。我在“主页”页面上工作,但无法在链接的页面上执行此操作。代码几乎与功能切换一样,是页面结尾的正文中的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:[email protected]">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> 
+0

在撒哈拉目录中的链接的网页?你可能有一个相对路径问题。 – zero298

回答

0

你缺少<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:[email protected]">Contact Us</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <!-- /.navbar-collapse --> 
 

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