Bootstrap折叠效果
声明式用法
1.新建一个web项目ch27，将ch26里面bootstrap所要用到的css、JavaScript文件等复制到ch27。
2.声明式用法实例
<body>
<div class="container">
//data-toggle="collapse" 用来触发JavaScript插件。
//给这个<button>加一个data-toggle="collapse"属性。
//data-target用来指定当你点击按钮时对应显示/隐藏的div。
<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#shows">折叠</button>
//当点击这个按钮时对应显示隐藏一个div。
//给这个<div>添加一个collapse in
<div id="shows" class="collapse">
<div class="well">
显示的内容
</div>
</div>
</div>
</body>
3.运行效果
（默认是隐藏的）
（点击，显示）
Javascript用法
1.javascript用法实例
<div class="container">
<div class="panel-group">
//这是一个panel的组
//panel里面右包括panel的头、panel的body和panel的bottom。
<!--一个功能 -->
<div class="panel panel-default">
<div class="panel-heading">
//<h4>作为panel的头
<h4 class="panel-title">
<a href="#" data-toggle="collapse" data-target="#channel_demo1">栏目管理1</a>
//panel的头应该是可以点击的，所以这里是一个超链接。
//data-toggle="collapse"
//data-target="#channel_demo1"注意一定要以#开头选择你要隐藏的
项目。
</h4>
</div>
<div class=" collapse panel-collapse" id="channel_demo1">
<div class="panel-body">
//在<ul>里面写内容
<ul>
<li><a href="#">增加栏目</a></li>
<li><a href="#">增加栏目</a></li>
<li><a href="#">增加栏目</a></li>
</ul>
</div>
</div>
</div>
2.运行效果
（点击“栏目管理”隐藏掉，再点击“栏目管理”显示出来。）
3.新建demo02.html，我们可以再copy上面的代码三份，得到三个“栏目管理”，为了区分我们可以分别改成“栏目管理1”、“栏目管理2”和“栏目管理3”。
4.运行效果
5.新建demo03.html复制demo02.html的内容。
（实现当我们点击“栏目管理1”，先将“栏目管理2”和“栏目管理3”关闭后，再打开“栏目管理1”下面的内容。）
我们只需要栏目管理1上加了一个data-parent="#panelcontainer"，当单击栏目管理1，把这个容器里面的所有collapse都给隐藏掉，然后再展开栏目管理1对应的collapse，并在它的panel-group上加了一个id叫panelcontainer。
<a href="#" data-toggle="collapse" data-target="#channel_demo1" data-parent="#panelcontainer">栏目管理1</a>
和
<div class="panel-group" id="panelcontainer">
6.运行效果
事件
1.将demo03.html里面的内容复制到新建的demo04.html。
2.用事件触发来实现当“栏目管理2”的collapse显示的时候，我们在最下方显示一句话“栏目2展开了。。。”。
（我们只需要在demo03.html的头文件中加一个script语句，
<script language="JavaScript">
$(function(){
//给容器加个事件注册
$('#channel_demo2').on('show.bs.collapse', function () {
$("#tashow").html("栏目2展开了。。。");
});
});
</script>
3.运行效果
扫一扫
568
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
