本文实例讲述了框架实现的简单手风琴效果。分享给大家供大家参考，具体如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' titlewww.jb51.net jQuery手风琴效果/title样式。包装{ width : 200 px h8 : auto margin :50 px汽车；边界-半径： 5px } ul，li，H4 {列表式：无；保证金： 0；padding: 0 } .wrapul{border-radius: 5px } .包装ulli {背景： # e 4644 B；文本对齐：中心；边框-底部：实心1px # Ded1D 1 color : # fffcursor :指针；相对位置：} .包装ulli :最后一个孩子{边框-底部：无；} .包装ulli H4 { padd :8 px 0；} .绝对位置：top : 5pxright : 12px font-size : 22px；color: # fffdisplay:内联块；} .wrapulli .child-ul {背景： # fff显示器：无；} .wrapulli .child-ul Li { color : # 000；线高： 40px}/style/head body div=' wrap ' ul=' menu ' Li H4软件jiaoxue/H4 span/span ul=' child-ul ' Li Java/Li Li web前端/li li安卓开发/li li软件测试/li /ul /li li h4游戏动漫/H4/span ul class=' child-ul ' Li Java/Li Li web前端/li li安卓开发/li li软件测试/li /ul /li li h4电商企业/span/span ul class=' child-ul ' Li淘宝/li li天猫/li li京东/li li苏宁易购/li /ul /li li h4营销培训/H4/SPan ul=' child-ul ' liseo/Li Li微信营销/li li网络创业/li li市场营销/Li/ul/Li/ul/分区脚本src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js /脚本脚本类型=' text/JavaScript ' $(function(){ $().包装ulli’).on('click ')，function(){ var next=$(this).孩子们child-ul ')；var图标=$(这个)。儿童(“span”)；下一个。滑动切换(“渐变”)；if(图标。html()===' '){ icon。html('-')；} else { icon。html(" ")；} $('.child-ul ').不是（下一个)。向上滑动("快速");//不是当前点击的内容全部向上收起$('.包装ulli’).儿童(' span ').不是（图标)。html(" ")；返回false})})/脚本/正文/html使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试，运行结果如下：

更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery切换特效与技巧总结》 、 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

希望本文所述对大家框架程序设计有所帮助。