折叠面板适合在有限空间里显示大量信息。页面加载后，设置所有列表项处于折叠状态，用户可以单击折叠项目标题栏，切换当前标题下的内容是否显示。
1.案例呈现
留言板“帮助中心”页面有新用户必读、服务协议、留言基础操作、如何删除留言和留言如何迅速得到办理等模块。页面加载后，所有模块处于折叠状态，如图6-28所示。用户单击任一个模块的标题栏，如果当前是折叠状态，则展开；如果当前是展开状态，则折叠。“留言基础操作”模块折叠时，单击“留言基础操作”模块的标题栏效果，如图6-29所示。
图6-28 折叠效果
图6-29 “留言基础操作”展开效果
2.案例分析
页面HTML布局代码以“留言基础操作”模块为例，示例如下。
<h3> 留言基础操作</h3>
<div>
<p>1.发表新留言</p>
<p>2.对其它用户的留言发表评价</p>
<p>3.对官方给我的回复发表评价</p>
<p>4.编辑自己的留言</p>
</div>
页面加载后，通过设置CSS样式“display: none”将所有模块处于折叠状态。将每一个模块的标题栏绑定单击事件及其处理程序。用户单击任一个模块的标题栏，如果当前是折叠状态，则将其下一个同级元素节点的display属性设置为“block”，样式设为active，将其余模块display属性设置为“none”；如果当前是展开状态，则将其display属性设置为“none”，样式设为空。
3.案例实现
1 <script>
2 var collapse = document.getElementById('collapse');
3 var title = collapse.getElementsByTagName('h3');
4 var content = collapse.getElementsByTagName('div');
5 for (var i = 0; i < title.length; i++) {
6 title[i].onclick= function () {
7 var current = this.nextElementSibling;
8 if (current.style.display == 'block') {
9 current.style.display = 'none';
10 this.className = '';
11 } else {
12 // 重置所有折叠项内容为隐藏
13 for (var i = 0; i < content.length; i++) {
14 content[i].style.display = 'none';
15 content[i].previousElementSibling.className = '';
16 }
17 current.style.display = 'block';
18 this.className = 'active';
19 }
20 }
21 }
22 </script>
案例完整的HTML、CSS代码详见本书源程序。上述代码中，第2-4行代码分别获取了所有模块标题栏和模块内容；第5-6行代码为所有的标题栏绑定鼠标单击事件及其处理程序。第7行代码获取了当前模块标题栏对应的模块内容；第8-18行代码实现了用户单击任一个模块的标题栏，如果当前是折叠状态，则展开；如果当前是展开状态，则折叠。