bootstrap框架列表组，可以在 ul 元素上添加 .list-group 类, 在
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
关于bootstrap框架折叠，.collapse 类用于指定一个折叠元素 (实例中的
); 点击按钮后会在隐藏与显示之间切换。
控制内容的隐藏与显示，需要在 （ 元素上你可以使用 href 属性来代替 data-target 属性）或 元素上添加 data-toggle=”collapse” 属性。 data-target=”#id” 属性是对应折叠的内容 (
)。
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
使用列表组和折叠实现侧边导航栏，点击链接查看效果：1833233.com/collapse/
代码如下：
<ul id="accordion1" class="list-group">
<li class="list-group-item list-bgcolor" data-toggle="collapse" data-target="#demo1">衣服</li>
<li class="list-group-item list-tight">
<ul class="list-group list-margin collapse show" id="demo1" data-parent="#accordion1">
<li class="list-group-item">上衣</li>
<li class="list-group-item">裤子</li>
<li class="list-group-item">连衣裙</li>
</ul>
</li>
<li class="list-group-item list-bgcolor" data-toggle="collapse" data-target="#demo2">饰品</li>
<li class="list-group-item list-tight">
<ul class="list-group list-margin collapse" id="demo2" data-parent="#accordion1">
<li class="list-group-item">耳环</li>
<li class="list-group-item">发夹</li>
<li class="list-group-item">发箍</li>
</ul>
</li>
<li class="list-group-item list-bgcolor" data-toggle="collapse" data-target="#demo3">化妆品</li>
<li class="list-group-item list-tight">
<ul class="list-group list-margin collapse" id="demo3" data-parent="#accordion1">
<li class="list-group-item">爽肤水</li>
<li class="list-group-item">精华</li>
<li class="list-group-item">粉底</li>
</ul>
</li>
</ul>
</div>
这里.show类是让内容默认显示，比如这里，是让“衣服”这一栏显示， 而使用 data-parent 属性来确保所有的折叠元素在指定的父元素下，这样就能实现在一个折叠选项显示时其他选项就隐藏啦。
