在学习阶段，中午吃饭回来学个bootstrap手风琴插件！
投稿于 被查看 16609 次 评论：85
在学习阶段，中午吃饭回来学个bootstrap手风琴插件！
手风琴效果展示：折叠！
注意以及属性的作用是什么？
☑ 使用 panel，面板标题 panel-heading 内加入 panel-title 做为触元素，使用panel-body的父元素作为折叠区；
使用 panel-collapse collapse样式。若想让折叠区默认显示，则加个in样式。fade效果也可以使用！
☑ 使用一个 panel-group 来包含多个 panel，从而实现手风琴效果；
☑ 每个 panel 里的触发元素都要指定data-parent属性；
☑ data-parent 属性的值对应 panel-group样式元素的ID或者其他样式标识符；
☑ 触发元素需要指定 data-toggle，并且值为 collapse；
☑ 触发元素都要指定 data-target属性；标题和内容区捆绑在一起
☑ data-target属性的值对应 panel-body 的父元素的ID或者其他样式标识符。
html 代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>手风琴（Collapse）</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>
<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">前端开发</a></h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<ul class="list-unstyled">
<li>HTML</li>
<li>CSS</li>
<li>javascript</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">后端学习</a></h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse fade">
<div class="panel-body">
<ul class="list-unstyled">
<li>Java</li>
<li>PHP</li>
<li>Python</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse"data-parent="#accordion"href="#collapseThree">移动端开发</a></h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<ul class="list-unstyled">
<li>android</li>
<li>ios</li>
<li>webapp</li>
</ul>
</div>
</div>
</div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
用户评论