Collapse
实现Collapse
- 在某个元素（比如
<div>）加上 .collapse 类，该元素用来显示折叠的内容
- 为了控制折叠内容的显示与隐藏，需要增加另外一个元素（
<a> 或者 <button>），并且加上 data-toggle="collapse" 类
- 为了将折叠元素与控制折叠的元素关联起来，需要在折叠元素上加上
id=xxx 并且在控制折叠的元素上加上 data-target=#xxx（<a>可以使用 href=#xxx 代替）。xxx必须保持一致。注意 # 不能省略。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<title>Collapse</title>
<script>
function showHTMLContent(showElement, codeElement) {
$(showElement).html($('<div/>').text($(codeElement).html()).html());
}
$(function() {
showHTMLContent('#showBtnCollapse', '#btnCollapse');
showHTMLContent('#showLinkCollapse', '#linkCollapse');
showHTMLContent('#showListCollapse', '#listCollapse');
showHTMLContent('#showPanelCollapse', '#panelCollapse');
showHTMLContent('#showPanelGroupCollapse', '#panelGroupCollapse');
$('#addInClass').click(function() {
if (this.checked) {
$('#cpp').addClass('in');
} else {
$('#cpp').removeClass('in');
}
showHTMLContent('#showBtnCollapse', '#btnCollapse');
});
});
</script>
</head>
<body>
<div class="container">
<h1>Button Collapse</h1>
<form>
<input type="checkbox" id="addInClass"> set visible default <br>
</form>
<h2>代码</h2>
<pre id="showBtnCollapse"></pre>
<h2>样式</h2>
<div id="btnCollapse">
<button data-toggle="collapse" data-target="#cpp" class="btn btn-primary">C++</button>
<div id="cpp" class="collapse">
C++是C语言的继承，它既可以进行C语言的过程化程序设计，
又可以进行以抽象数据类型为特点的基于对象的程序设计，
还可以进行以继承和多态为特点的面向对象的程序设计。
</div>
</div>
<br><br>
<h1>Link Collapse</h1>
<h2>代码</h2>
<pre id="showLinkCollapse"></pre>
<h2>样式</h2>
<div id="linkCollapse">
<a data-toggle="collapse" href="#java">Java</a>
<div id="java" class="collapse">
Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，
还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。
</div>
</div>
<br><br>
<h1>List Collapse</h1>
<h2>代码</h2>
<pre id="showListCollapse"></pre>
<h2>样式</h2>
<div id="listCollapse">
<a data-toggle="collapse" href="#python">Python</a>
<div id="python" class="collapse">
<ul class="list-group">
<li class="list-group-item">Python2.7</li>
<li class="list-group-item">Python3.5</li>
<li class="list-group-item">Python3.6</li>
</ul>
</div>
</div>
<br><br>
<h1>Panel Collapse</h1>
<h2>代码</h2>
<pre id="showPanelCollapse"></pre>
<h2>样式</h2>
<div id="panelCollapse">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#panelTest">Collapsible panel</a>
</h4>
</div>
<div id="panelTest" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
<br><br>
<h1>Panel Group Collapse</h1>
<h2>代码</h2>
<pre id="showPanelGroupCollapse"></pre>
<h2>样式</h2>
<div id="panelGroupCollapse">
<div class="panel-group" id="programmingLanguages">
<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title">
<a data-toggle="collapse" data-parent="#programmingLanguages" href="#go"> Go </a>
</h1>
</div>
<div id="go" class="panel-collapse collapse">
<div class="panel-body">
Go是一种新的语言，一种并发的、带垃圾回收的、快速编译的语言。
它具有以下特点：它可以在一台计算机上用几秒钟的时间编译一个大型的Go程序。
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#programmingLanguages" href="#php"> PHP </a>
</h4>
</div>
<div id="php" class="panel-collapse collapse">
<div class="panel-body">
PHP（外文名:PHP: Hypertext Preprocessor，中文名：“超文本预处理器”）是一种通用开源脚本语言。
语法吸收了C语言、Java和Perl的特点，利于学习，使用广泛，主要适用于Web开发领域。
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#programmingLanguages" href="#csharp"> C# </a>
</h4>
</div>
<div id="csharp" class="panel-collapse collapse">
<div class="panel-body">
C#是微软公司发布的一种面向对象的、运行于.NET Framework之上的高级程序设计语言。
并定于在微软职业开发者论坛(PDC)上登台亮相。C#是微软公司研究员Anders Hejlsberg的最新成果。
</div>
</div>
</div>
</div>
</div>
<br><br><br><br>
</div>
</body>
</html>
查看运行结果