pos*_*ula 25 javascript css collapse twitter-bootstrap
我正在尝试使用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文档中复制了这段代码,但它仍无法正常工作.任何人都可以找出问题所在？
Mai*_*KaY 43
jQuery是必需的;-)
<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>
小智 15
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>
Ric*_*ico 15
我越来越疯狂一小时......，我回答这个问题经过7年的，因为如果你使用的是新的自举5，属性data-bs-toggle，data-bs-parent和data-bs-target，讲究-bs-在中间。
小智 7
如果使用 Bootstrap 4.5 折叠组件，请在 HTML 标签体内使用这两个链接
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
小智 6
您可能添加了两个脚本文件，并且需要删除其中之一
<script src="./assets/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="./assets/bootstrap/js/bootstrap.min.js"></script>删除bundle.min.js或bundle.js