jquery手风琴特效步骤详解

这次给大家带来jquery手风琴特效步骤详解，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 += '

' + element.title + '

'; if(element.submenu!=null) { li+='

'; $.each(element.submenu, function (ind, ele) { li += '
• ' + ele.title + '
'; }); 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调用方式

        $(function(){    $("#accordion").accordion();  });

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

推荐阅读：

jQuery实现鼠标经过时放大图片功能

jquery实现图片滑动切换（附代码）

以上就是jquery手风琴特效步骤详解的详细内容，更多请关注【创想鸟】其它相关文章！