这是项目中的一个功能，在开始加入这个功能时，首先想到的是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'); });});
演示地址：
折叠面板演示
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/4459/viewspace-2815454/ ，如需转载，请注明出处，否则将追究法律责任。
请登录后发表评论
登录
全部评论
