基于jquery实现简单的手风琴特效

手风琴效果是项目中使用频率较高的一种效果，本文实例J就为大家讲述了jquery实现简单的手风琴特效代码。分享给大家供大家参考。具体如下：运行效果截图如下：

具体代码如下：

钢性铸铁样式

/* CSS文档*/正文{ margin: 0自动添加： 0自动；font-size : 9 pt字体系列：微软雅黑，宋体，阿里亚尔，Helvetica，凡尔登纳，无衬线字体；}.手风琴{左填充： 0px}.手风琴李{边框-顶部： 1px实心# 000；列表样式类型：无；}.标题菜单{宽度： 100%；高度： 30px背景-color : # f2f2f 2；padding: 5px 0px文本-左对齐：光标：指针；}.标题菜单img { position:相对；left: 20pxtop: 5px}。标题菜单span { display : inline-block；相对位置：left: 40px}。子菜单{ text-align : left宽度： 100%;左填充left: 0px}。子菜单li {列表样式-:型无；宽度： 100%;}.Li img { position : relative eleft : 20 pxtop : 5px }。子菜单阿利{位置：相对；left: 40pxtop: 5px文本装饰：无；}.子菜单Li span { display : inline-block；高度： 30pxpadding: 5px 0px}。悬停{底色： # 4a 5b 79}自定义射流研究…

（函数($){ piano=function(){ _ menu='[{ ' title ' : '一级目录，' img':'images/cog.png '，'子菜单：[{'title': '二级目录，img ' : ' images/monitor _ window _ 3d。png ' }，{'title': '二级目录，img ' : ' images/monitor _ window _ 3d。png ' }，{'title': '二级目录，img ' : ' images/monitor _ window _ 3d。png ' }]}，{'title': '一级目录，' img':'images/cog.png '，'子菜单：[{'title': '二级目录，img ' : ' images/monitor _ window _ 3d。png ' }，{'title': '二级目录、“img”:“图像/监视器_窗口_ 3d。png"}、{"id":"4 "、" title":二级目录，img ' : ' images/monitor _ window _ 3d。png ' }]}]'；返回EP={ init : function(obj){ _ menu=eval('(' _ menu ')'))；var li=$。每个(_menu，function (index，element){ Li=' lidiv class=' title menu ' img src=' element。img ' width=' 16 ' height=' 16 ' alt=' '/span '元素。title '/span/div '；if(元素。子菜单！=null) { li='ul class='子菜单"";$.每个（元素。子菜单，函数(ind，ele){ Li=' liimg src=' ele。img ' width=' 16 ' height=' 16 ' alt=' '/spana href=' # ' ele。标题'/a/span/Li '；});Li='/ul '；}李='/李'；});追加(李)；} } } $.fn.accordion=function(选项){ var pia=new piano()；皮娅。init($(this))；返回这个。每个(函数(){ var accs=$(this)).儿童(“李”)；accs .每个(复位);accs。单击(OnClick)；var menu_li=$(' .子菜单')。儿童(“李”)；menu_li .每个(函数（索引，元素){ $(这个).鼠标移动(函数(e) { $(本)).兄弟姐妹()。removeClass(“”悬停');$(这个)。查找(' a ').css('color '，' # fff ')；$(这个)。兄弟姐妹()。查找(' a ').css('color '，' # 000 ')；$(这个)。addClass(')悬停');});});});}函数onClick() { $(this).兄弟姐妹('里').查找(' ul ').各（藏);$(这个)。查找(' ul ').向下滑动("正常");返回false}函数hide() { $(this).向上滑动("正常");}函数reset() { $(this).查找(' ul ').hide()；} })(jQuery)；超文本标记语言调用方式

！doctype html html ownerta charset=' utf-8 '标题无标题文档/title脚本src=' http : jquery-1。8 .0 .量滴js '/脚本链接rel='样式表type=' text/CSS ' href=' style。CSS ' script src=' http :手风琴。js '/script script type=' text/JavaScript ' $(function(){ $(' # accordion ')).手风琴();});/script/head dyul id=' accordion ' class=' accordion ' style=' width :200 px；高度：500 px/ul/body/html希望本文所述对大家学习jquery程序设计有所帮助，对掌握手风琴特效更加熟练，文章下方有链接的相关文章，希望大家阅读学习。