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

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

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

代码：
1.引用

<script src="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‘);
  });
});

演示地址：
折叠面板演示

本文出自 “潍坊seo” 博客，请务必保留此出处http://weifangseo.blog.51cto.com/9257185/1543283