我无法让响应式导航栏扩展和折叠。出于某种原因，它甚至没有向控制台注册点击。如果您想亲眼看到，我的网站是here。以下是我的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Merrimack Science Olympiad</title>
<link rel="shortcut icon" href="http://1.bp.blogspot.com/-3cUAbkNk13s/TvxtaSEl3JI/AAAAAAAABBU/ehwZUU761uU/s200/logo.jpg"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="295993656179-i5jpbbdg7bn9um3fkv1jnvvc4vat3u14.apps.googleusercontent.com">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<meta name="google-signin-client_id" content="43500886953-hphjpqeul1ec5q5sbr4v85oc1gv5to6m.apps.googleusercontent.com">
<!-- Le <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" rel="stylesheet"></script>
styles -->
<link href="css/simple-sidebar.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<script src="js/jquery.min.js" rel="stylesheet"></script>
<style type="text/css">
body {
padding-top: 40px;
padding-bottom: 60px;
border-radius: 80px;
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
MHS SciOly
</a>
</li>
<h5>Life, Personal and Social</h5>
<li>
<a href="anatomy.html">Anatomy</a>
</li>
<li>
<a href="cellbio.html">Cell Bio</a>
</li>
<li>
<a href="diseasedetectives.html">Disease Detectives</a>
</li>
<li>
<a href="greengen.html">Green Generation</a>
</li>
<li>
<a href="ivasives.html">Invasives</a>
</li>
<h5>Earth and Space</h5>
<li>
<a href="astronomy.html">Astronomy</a>
</li>
<li>
<a href="dynamicplanet.html">Dyamic Planet</a>
</li>
<li>
<a href="fossils.html">Fossils</a>
</li>
<li>
<a href="geomapping.html">Geo Mapping</a>
</li>
<h5>Physical Science and Chem</h5>
<li>
<a href="airtrajectory.html">Air Trajectory</a>
</li>
<li>
<a href="itsabouttime.html">It's About Time</a>
</li>
<li>
<a href="chemlab.html">Chem Lab</a>
</li>
<li>
<a href="forensics.html">Forensics</a>
</li>
<li>
<a href="proteinmodeling.html">Protein Modeling</a>
</li>
<li>
<a href="windpower.html">Wind Power</a>
</li>
<h5>Technology and Engineering</h5>
<li>
<a href="bridgebuilding.html">Bridge Building</a>
</li>
<li>
<a href="electricvehicle.html">Electric Vehicle</a>
</li>
<li>
<a href="robotarm.html">Robot Arm</a>
</li>
<li>
<a href="wrightstuff.html">Wright Stuff</a>
</li>
<h5>Inquiry and Nature</h5>
<li>
<a href="exdes.html">Experimental Design</a>
</li>
<li>
<a href="gameon.html">Game On</a>
</li>
<li>
<a href="hydrogeology.html">Hydrogeology</a>
</li>
<li>
<a href="widi.html">Write It Do It</a>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="btn btn-secondary btn-lg">
<a href="#menu-toggle" class="button active" id="menu- toggle" data-toggle="collapse">events</a>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="js/jquery.js" rel="stylesheet"></script>
<!-- Bootstrap Core JavaScript -->
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> </script>
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="ico/favicon.png">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="index.html">MHS Science Olympiad</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="social.html">Social</a></li>
<li><button type = "button" class = "btn btn-default btn-sm">
<span class = "glyphicon glyphicon-user"></span>
User
</button></li>
</ul>
<form class="navbar-form pull-right">
<form class="form-search"> <input type="text" class="input-medium search-query"> <button type="submit" class="btn">Search</button> </form>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit">
<h2 align="center">Welcome to the Official Site of <br><h2 align="center">Merrimack Science Olympiad</h2><br>
<p align="center">This site is currently in the works, but soon will contain tests for every event. As well as news and updates. Below are some helpful quicklinks</p>
<p align="center">
<div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark" data-longtitle="true" data-width="260" data-height= "50" align="center"></div>
<script>
function onSignIn(googleUser) {
// Useful data for your client-side scripts:
var profile = googleUser.getBasicProfile();
console.log("ID: " + profile.getId()); // Don't send this directly to your server!
console.log("Name: " + profile.getName());
console.log("Image URL: " + profile.getImageUrl());
console.log("Email: " + profile.getEmail());
// The ID token you need to pass to your backend:
var id_token = googleUser.getAuthResponse().id_token;
console.log("ID Token: " + id_token);
};
</script>
</p>
</div>
<!-- Example row of columns -->
<div class="row">
<div class="span5">
<h2 align="center">Chat</h2>
<p align="center">Begin talking below! </p>
<br></br>
<p align="center"><p align="center" class="span2"><script type="text/javascript" align="center"> var av_chat_lang = 'en'; </script>
<script type="text/javascript" src="http://tl.altervista.org/js/chat.js"> </script></p></p>
</div>
<div class="span3">
<h2>General Resources</h2>
<p>This is where build events should purchase all of their parts from. The site supplies all fasteners and hardware you will need. All orders arrive by the next business day, and you will much less here. Pay attention to the number of pieces per package, it's very easy to buy fewer parts than you need</p>
<br></br>
<p align="center"><a class="btn" href="http://www.mcmaster.com/#">Visit »</a></p>
</div>
<div class="span3">
<h2>Questions?</h2>-
<p>What's science olympiad? Want to join?</p>
<br></br>
<p align="center"><a class="btn" href="https://soinc.org/division_c_events">Visit »</a>
<span class="glyphicon glyphicon-question-sign"></span></p>
</div>
</div>
<hr>
<footer>
<p>© Sean Sylvester 2015</p>
</footer>
</div> <!-- /container -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o) [0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google- analytics.com/analytics.js','ga');
ga('create', 'UA-60129587-1', 'auto');
ga('send', 'pageview');
</script>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/bootstrap-transition.js" rel="stylesheet"> </script>
<script src="../assets/js/bootstrap-alert.js" rel="stylesheet"></script>
<script src="../assets/js/bootstrap-modal.js" rel="stylesheet"></script>
<script src="../assets/js/bootstrap-dropdown.js" rel="stylesheet"></script>
<script src="../assets/js/bootstrap-scrollspy.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/bootstrap-tooltip.js"></script>
<script src="../assets/js/bootstrap-popover.js"></script>
<script src="../assets/js/bootstrap-button.js"></script>
<script src="js/bootstrap-collapse.js" rel="stylesheet"></script>
<script src="../assets/js/bootstrap-carousel.js"></script>
<script src="../assets/js/bootstrap-typeahead.js"></script>
<script src="https://apis.google.com/js/platform.js" async defer></script>