Bootstrap折叠不折叠
Bootstrap折叠不折叠
提问于 2014-04-09 15:41:20
我正在尝试使用Bootstrap创建一个可折叠的组件。我的代码是
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit
</div>
</div>
</div>
</div>
当点击“折叠组项目#1”时，它应该折叠"panel-body“类中的项目，但它不会没有点击的效果。我直接从Bootstrap文档中复制了这段代码，但它仍然不能工作。有人能想出问题出在哪里吗？
回答 11
Stack Overflow用户
回答已采纳
发布于 2014-04-09 15:46:24
需要jQuery (如果您使用的是Bootstrap 3或4) ;-)
<html>
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- THIS LINE -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit
</div>
</div>
</div>
</div>
</body>
</html>
Stack Overflow用户
发布于 2014-04-09 15:51:49
bootstrap.js正在使用jquery库，所以你需要在bootstrap js之前添加jquery库。
所以请添加jquery库，如下所示
注意:请维护js文件的顺序。html页面使用自顶向下方法进行编译
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>Stack Overflow用户
发布于 2014-04-09 15:55:54
添加jQuery并确保只有一个链接用于jQuery，因为多个链接不起作用...
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22955916
复制相关文章
相似问题