我刚刚开始学习 bootstrap。我遇到了这个关于折叠的问题。点击时折叠不显示内容。点击时它什么都不做，我已经尝试了从更新 jquery 的链接，从标题中删除按钮 div，使用id 而不是 ul 的父 div 中的类，但似乎对我没有任何作用。我知道这一定是一个新手错误，但出于某种原因我无法弄清楚。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initialscale=
1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 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.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="" class="navbar-brand">My Website</a>
<button type="button" class="navbar-toggle" datatoggle="collapse" data-target=".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>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="">Page 1</a></li>
<li><a href="">Page 2</a></li>
<li><a href="">Page 3</a></li>
</ul>
</div>
</div>
</div>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/
jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files
as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
最佳答案
应该是 data-toggle="collapse" 而不是 datatoggle="collapse"
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
演示:Fiddle
关于javascript - 单击时 Bootstrap 折叠不显示内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31553930/