自己动手写折叠面板

这是项目中的一个功能，在开始加入这个功能时，首先想到的是jQuery 插件，因为jquery的折叠菜单，折叠面板插件有不少，所以首先是测试jquery插件，但是测试了大概3个后，发现功能的确是强大，但是都有几处不符合我们的要求，要么是颜色难改（使用了固定的图片），要么是需要改更多的css样式。所以最后决定自己开发。

使用jquery开发折叠面板非常简单。

实现思路：
默认全部隐藏，点击一个时，先执行隐藏操作，然后再显示当前点击的，如果再次点击就执行隐藏操作。

代码：
1.引用

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://shandongit.com/js/jquery.js"></script>

2.css

body{    font-family:微软雅黑;}.box-show{    width:350px;    margin: 1em .5em;}.box-show h3 {    margin:0;    padding:.45em;    background:#ebebeb;    color:black;    font-size:16px;   border-top: 1px solid #3c3c3c;    border-bottom: 1px solid #3c3c3c;}.box-show div{    padding: .5em .25em;}

3.html

<div class="box-show"><h3>字母A</h3><div>内容.</div><h3>字母B</h3><div>内容</div><h3>字母C</h3><div>内容</div></div>

4.使用的js

$(document).ready(function() {  $('div.box-show:eq(0)> div').hide();    $('div.box-show:eq(0)> h3').click(function() {    $(this).next().slideToggle('fast');  });});

演示地址：
折叠面板演示