bootstrap3的panel（折叠窗口或手风琴效果）

最新推荐文章于 2023-07-24 22:23:07 发布

跬步科技

最新推荐文章于 2023-07-24 22:23:07 发布

阅读量3.6k

点赞数

1、一些被修改的：

2.3版本的 3.0版本

2、用法和2.3的基本相同：

3、基本代码：

[html] view plain copy

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="dist/css/bootstrap.css">
<script type="text/javascript" src="dist/js/jquery.js"></script>
<script type="text/javascript" src="dist/js/bootstrap.js"></script>
<script type="text/javascript" src="bootstrap/js/collapse.js"></script>
<title>无标题文档</title>
</head>
<body style="margin:200px;">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a href="#panel1" class="panel-toggle" data-toggle="collapse" data-parent="#accordion">
卡1
</a>
</div>
</div>
<div id="panel1" class="panel-collapse collapse in">
<div class="panel-body">
卡1内容
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a href="#panel2" class="panel-toggle" data-toggle="collapse" data-parent="#accordion">
卡2
</a>
</div>
</div>
<div id="panel2" class="panel-collapse collapse in">
<div class="panel-body">
卡2内容
</div>
</div>
</div>
</div>
<script>
$('.collapse').collapse({
toggle: true,parent:'#accordion'
})
$('.panel-heading').on('click', function () {
var self = this;
$(self).nextAll().eq(0).collapse("show");
})
</script>
</body>
</html>

4、效果图：

关注