我有这个代码,我无法找出它为什么不起作用。 桌面版似乎工作正常,但当我在响应单元上使用它时,它不会打开菜单。这是我的代码。
我希望你们中的一些人可以帮助我,因为我正在尝试启动这个小社区,如果响应式菜单不起作用,它就不会那么好。谢谢!
<!DOCTYPE html>
<html>
<head>
<title>e3w Networks</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bignav.css" rel="stylesheet" media="screen">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<body background="mcpic.png">
<script src="js/jquery.js"></script>
<div class="navbar-wrapper">
<div class="container">
<p></p>
<nav class="navbar navbar-default navbar-static">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="e3wlogo.png" width="120" "height="44"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li><a href="shop.html"><span class="glyphicon glyphicon-shopping-cart"></span> Shop</a></li>
<li class="dropdown dropdown-large">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-list"></span> Teams<b class="caret"></b></a>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">LoL Teams</li>
<li><a href="http://www.e3w.dk/dwa">dwA.</a></li>
<li><a href="#">Button toolbar</a></li>
<li><a href="#">Sizing</a></li>
<li><a href="#">Nesting</a></li>
<li class="divider"></li>
<li class="dropdown-header">Minecraft</li>
<li><a href="http://www.e3w.dk/dwa">dwA.</a></li>
<li><a href="#">Button toolbar</a></li>
<li><a href="#">Sizing</a></li>
<li><a href="#">Nesting</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">CS:GO Teams</li>
<li><a href="http://www.e3w.dk/dwa">dwA.</a></li>
<li><a href="#">Button toolbar</a></li>
<li><a href="#">Sizing</a></li>
<li><a href="#">Nesting</a></li>
<li class="divider"></li>
<li class="dropdown-header">CS:S Teams</li>
<li><a href="http://www.e3w.dk/dwa">dwA.</a></li>
<li><a href="#">Button toolbar</a></li>
<li><a href="#">Sizing</a></li>
<li><a href="#">Nesting</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">asdad</li>
<li><a href="#">Basic example</a></li>
<li><a href="#">Sizing</a></li>
<li><a href="#">Sizing</a></li>
<li><a href="#">Sizing</a></li>
<li class="divider"></li>
<li class="dropdown-header">Navs</li>
<li><a href="#">Tabs</a></li>
<li><a href="#">Pills</a></li>
<li><a href="#">Justified</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Information</li>
<li class="disabled"><p class="navbar-text">If you want your team in this game group<br \> section please click on the "Add your team" button.<br \>When you click and fill the form, you also need to<br \> agree to our policy/rules</p></li>
<li class="disabled"><a href="#"><button type="button" class="btn btn-block btn-group-sm">
<span class="glyphicon glyphicon-plus"></span> Add your team
</button></a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li data-toggle="modal" data-target="#myModal"><a href="#"><span class="glyphicon glyphicon-thumbs-up"></span> Help us</a></li>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-title" id="myModalLabel"><!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Overview</a></li>
<li><a href="#donate" data-toggle="tab">Donation</a></li>
<li><a href="#youtube" data-toggle="tab">YouTube</a></li>
<li><a href="#facebook" data-toggle="tab">Facebook</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">You can help us in many ways.</div>
<div class="tab-pane" id="donate">donate</div>
<div class="tab-pane" id="youtube">subscribe</div>
<div class="tab-pane" id="facebook">asdasd<p>sada</p></div>
</div></div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span><b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="disabled"><a href="#">We're sorry, but the login form isn't coded yet.</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</nav>
<div class="well"><p>So far from done</p><div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 17%">
<span class="sr-only">17% Complete (success)</span></div>
</div><div class="row">
</div><div class="well">
<table border="0">
<tr width="70%">
<td><div style="position:relative;width:280px;">
<a class="pull-left" style="position:relative; margin: 4px 5px 0 0;">
<img class="avatar" src="https://minotar.net/avatar/MarcusHegelund/32.png" player="MarcusHegelund" size="32" width="32" height="32" style="width: 32px; height: 32px; vertical-align: bottom;">
</a>
<a href="#" style="color: red"><b>Marcus</b></a>
<span class="label" style="background-color: green; color: white">Owner</span>
<span class="label" style="background-color: purple; color: white">Developer</span>
<span class="label" style="background-color: #FA0; color: white">Staff</span>
<p><i>Posted Nov. 16'th, 2013</i></p>
</div></td>
<td><p>hey</p><p>hey</p><p>hey</p><p>hey</p></td>
</table>
</div></div>
<nav class="navbar navbar-default navbar-static-bottom" role="navigation">
<p class="navbar-text">© Copyright 2011-2013, e3w Networks.</p>
<p class="navbar-text navbar-right"><a href="http://www.enaxy.dk">Enaxy</a></p>
<p class="navbar-text navbar-right"><a href="http://www.enaxy.dk">Enaxy</a></p>
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
答案 0 :(得分:3)
为什么要使用两次jquery文件?,例如
<script src="js/jquery.js"></script>
<script src="https://code.jquery.com/jquery.js"></script>
并且有两个身体
<body background="mcpic.png">
更改以下代码data-target=".navbar-collapse"
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">