Bootstrap插件-collapse
2024-09-06 06:08:39
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>声明式触发手风琴</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>body {
padding: 10px;
margin: 10px
}</style>
</head>
<body>
<!--触发手风琴可以通过自定义的 data-toggle 属性来触发。其中data-toggle值设置为 collapse，data-target="#折叠区标识符"-->
<div class="panel-group" id="myAccordion">
<div class="panel panel-accordion panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<!--定义data-parent属性，实现点击一个其中一个元素时，关闭所有的折叠区，再打开所单击的区域（如果所单击区域是展示的，则会关闭）-->
<a href="#panel1" data-toggle="collapse" data-target="#panel1" data-parent="#myAccordion">标题一</a>
</h4>
</div>
<!--在Bootstrap框架中，如果你想让内容区域不可视，只需要在 panel-collapse 样式上添加 collapse-->
<div class="panel-collapse collapse in" id="panel1"><!--in初始选定状态-->
<div class="panel-body">折叠区内容</div>
</div>
</div>
<div class="panel panel-accordion panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<!--为了把标题和内容区捆绑在一起，可以通过锚链接的方法，把标题区域和面板区连在一起-->
<a href="#panel2" data-toggle="collapse" data-target="#panel2" data-parent="#myAccordion">标题二</a>
<!--a标签可以省去data-target，因为href中已经声明，button就必须使用data-target自定义标签了-->
</h4>
</div>
<div class="panel-collapse collapse" id="panel2">
<div class="panel-body">折叠区内容</div>
</div>
</div>
<div class="panel panel-accordion panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#panel3" data-toggle="collapse" data-target="#panel3" data-parent="#myAccordion">标题三</a>
</h4>
</div>
<div class="panel-collapse collapse" id="panel3">
<div class="panel-body">折叠区内容</div>
</div>
</div>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
最新文章
- 疯狂Android讲义 - 学习笔记（四）
- Python基础2
- JS-身份证号获取出生日期、性别、年龄
- 在spark-shell里用集群方式启动时加入用户需要的jar
- iOS: ARC & MRC下string内存管理策略探究
- LeetCode Generalized Abbreviation
- 拓扑排序 POJ 2367
- JVM 参数翻译汉化解释
- PostgreSQL 中定义自己需要的数据类型
- 8007003Windows Update遇到未知错误
- 284. Peeking Iterator
- AM335x(TQ335x)学习笔记——挂载Ramdisk
- BZOJ 1093 [ZJOI2007]最大半连通子图
- 前端问题——png图片在IE6下透明失效，解决办法
- hdu Repositoryti
- RequireJS 入门指南
- tensorflow faster rcnn 代码分析一 demo.py
- ios之gcd浅析
- rapidjson使用
- 注册带有Portal功能的DYN365_ENTERPRISE_PLAN1地址