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

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

具体代码如下：
css样式

/* CSS Document */body {margin: 0 auto;padding: 0 auto;font-size: 9pt;font-family: 微软雅黑, 宋体, Arial, Helvetica, Verdana, sans-serif;}.accordion {padding-left: 0px;}.accordion li {border-top: 1px solid #000;list-style-type: none;}.titlemenu {width: 100%;height: 30px;background-color: #F2F2F2;padding: 5px 0px;text-align: left;cursor: pointer;}.titlemenu img {position: relative;left: 20px;top: 5px;}.titlemenu span {display: inline-block;position: relative;left: 40px;}.submenu {text-align: left;width: 100%;padding-left: 0px;}.submenu li {list-style-type: none;width: 100%;}.submenu li img {position: relative;left: 20px;top: 5px;}.submenu li a {position: relative;left: 40px;top: 5px;text-decoration: none;}.submenu li span {display: inline-block;height: 30px;padding: 5px 0px;}.hover {background-color: #4A5B79;}

自定义js

（function （$） {piano = function （） {_menu ="[{"title":"一级目录","img":"images/cog.png","submenu":[{"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","submenu":[{"title":"二级目录","img":"images/monitor_window_3d.png"},{"title":"二级目录","img":"images/monitor_window_3d.png"},{"id":"4","title":"二级目录","img":"images/monitor_window_3d.png"}]}]";return ep = {init: function （obj） {_menu = eval（"（" + _menu + "）"）; var li ="";$.each（_menu, function （index, element） {li += "<li><div class="titlemenu"><img src=" + element.img + " width="16" height="16" alt=""/><span>" + element.title + "</span></div>";if（element.submenu！=null）{li+="<ul class="submenu">";$.each（element.submenu, function （ind, ele） {li += "<li><img src=" + ele.img + " width="16" height="16" alt=""/><span><a href="#">" + ele.title + "</a></span></li>";}）;li+="</ul>";}li+="</li>";}）;obj.append（li）;}}}$.fn.accordion = function （options） {var pia = new piano（）;pia.init（$（this））;return this.each（function （） {var accs = $（this）.children（"li"）; accs.each（reset）;accs.click（onClick）;var menu_li = $（".submenu"）.children（"li"）;menu_li.each（function （index, element） {$（this）.mousemove（function （e） {$（this）.siblings（）.removeClass（"hover"）;$（this）.find（"a"）.css（"color", "#fff"）;$（this）.siblings（）.find（"a"）.css（"color", "#000"）;$（this）.addClass（"hover"）;}）;}）;}）;}function onClick（） {$（this）.siblings（"li"）.find（"ul"）.each（hide）;$（this）.find（"ul"）.slideDown（"normal"）;return false;}function hide（） {$（this）.slideUp（"normal"）;}function reset（） {$（this）.find（"ul"）.hide（）;}}）（jQuery）;

html调用方式

<！doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><script src="jquery-1.8.0.min.js"></script><link rel="stylesheet" type="text/css" href="style.css"><script src="accordion.js"></script><script type="text/javascript">$（function（）{$（"#accordion"）.accordion（）;}）;</script></head><body><ul id="accordion" class="accordion" style="width:200px;height:500px;"></ul></body></html>

希望本文所述对大家学习jquery程序设计有所帮助，对掌握手风琴特效更加熟练，文章下方有链接的相关文章，希望大家阅读学习。