我正在尝试使用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文档中复制了这段代码,但它仍然不能工作。有人能想出问题出在哪里吗?
发布于 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>
发布于 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>
发布于 2014-04-09 15:55:54
添加jQuery并确保只有一个链接用于jQuery,因为多个链接不起作用...
https://stackoverflow.com/questions/22955916
复制相似问题