基于jQuery实现的Accordion手风琴自定义插件

目前网上有很多各种各样的手风琴插件，但是没有一个完整实现了的侧菜单，今天写了一个可以无限子节点的手风琴侧菜单，有需要的可以参考一下，有什么好的想法可以留言。（没有经过彻底测试，不过问题应该不大）

下面老规矩，直接贴代码：

 1 (function ($) { 2   'use strict'; 3   var defaults = { 4     url: null, 5     param: {}, 6     data: {}, 7     fill: true, 8     level_space: 15, 9     onitemclick: null, 10     style: { 11       header: "accordion-header", 12       header_title: "accordion-header-title", 13       content: "accordion-content", 14       selected: "selected", 15       icon_base: "fa", 16       icon_collapse: "fa-angle-up", 17       icon_expand: "fa-angle-down" 18     } 19   } 20   var methods = { 21     init: function (options) { 22       return this.each(function () { 23         var $this = $(this); 24         if (!$this.hasClass("accordion")) { 25           $this.addClass("accordion"); 26         } 27         var settings = $this.data('tw.accordion'); 28         if (typeof (settings) == 'undefined') { 29           settings = $.extend({}, defaults, options); 30           $this.data('tw.accordion', settings); 31         } else { 32           settings = $.extend({}, settings, options); 33           $this.data('tw.accordion', settings); 34         } 35         if (settings.url) { 36           $.ajax({ 37             type: "post", 38             async: false, 39             url: settings.url, 40             data: settings.param, 41             success: function (data) { 42               settings.data = data; 43             } 44           }); 45         } 46         if (settings.fill) { 47           $this.height("100%"); 48         } 49         if (settings.data.length > 0) { 50           $this.data("count", settings.data.length); 51           $.each(settings.data, function () { 52             this.level = 1; 53             var item = $this.accordion("add", this); 54             $this.append(item); 55           }); 56           if ($this.find("." + settings.style.selected).length == 0) { 57             var data = $this.find(">li:first-child").data("data"); 58             $this.accordion("select", data); 59           } 60         } 61       }); 62     }, 63     add: function (data) { 64       var $this = $(this); 65       var settings = $this.data("tw.accordion"); 66       var item = $("<li class='" + settings.style.header + "'></li>"); 67       item.data("data", data); 68       var header = $("<div class='" + settings.style.header_title + "' data-accordion='" + data.id + "'>" + 69         "<i class='" + settings.style.icon_base + "" + data.icon + "'></i>" + 70         "<span>" + data.name + "</span></div>"); 71       header.css("padding-left", settings.level_space * data.level); 72       item.append(header); 73       if (data.childrens) { 74         var toggle = $("<i class='" + settings.style.icon_base + "" + settings.style.icon_collapse + "'></i>"); 75         toggle.css({ "font-size": "1.4em", "position": "absolute", "top": "7px", "right": "7px" }); 76         header.append(toggle); 77         var content = $("<ul class='" + settings.style.content + "'></ul>"); 78         content.data("count", data.childrens.length); 79         $.each(data.childrens, function () { 80           this.level = data.level + 1; 81           var child = $this.accordion("add", this); 82           content.append(child); 83         }); 84         item.append(content); 85       } 86       header.click(function () { 87         $this.accordion("select", data); 88       }); 89       if (data.selected) { 90         $this.accordion("select", data); 91       } 92       return item; 93     }, 94     select: function (data) { 95       var $this = $(this); 96       var settings = $this.data("tw.accordion"); 97       var header = $this.find("[data-accordion='" + data.id + "']"); 98       var item = header.parent(); 99       if (!header.hasClass(settings.style.selected) && !item.hasClass(settings.style.selected)) {100         var sibling = item.siblings();101         sibling.removeClass(settings.style.selected).children("." + settings.style.selected).removeClass(settings.style.selected);102         sibling.children("." + settings.style.icon_expand).removeClass(settings.style.icon_expand).addClass(settings.style.icon_collapse);103         if (data.childrens) {104           item.addClass(settings.style.selected);105           header.find("." + settings.style.icon_collapse).removeClass(settings.style.icon_collapse).addClass(settings.style.icon_expand);106           if (settings.fill) {107             var count = item.parent().data("count") - 1;108             item.css("height", "calc(100% - " + (item.height() * count) + "px)");109           }110         } else {111           header.addClass(settings.style.selected);112         }113       }114       if (settings.onitemclick) {115         settings.onitemclick(data);116       }117     },118     update: function (url, param) {119       var $this = $(this);120       var settings = $this.data("tw.accordion");121       if (typeof url == "object") {122         settings.param = url;123       } else {124         settings.url = url;125         settings.param = param;126       }127       $this.accordion("init", settings);128     },129     destroy: function (options) {130       return $(this).each(function () {131         var $this = $(this);132         $this.removeData('accordion');133       });134     }135   }136   $.fn.accordion = function () {137     var method = arguments[0];138     var args = arguments;139     if (typeof (method) == 'object' || !method) {140       method = methods.init;141     } else if (methods[method]) {142       method = methods[method];143       args = $.makeArray(arguments).slice(1);144     } else {145       $.error('Method ' + method + ' does not exist on tw.accordion');146       return this;147     }148     return method.apply(this, args);149   }150 })(jQuery);

 1 .accordion { 2   margin:0; 3   padding:0; 4   font-size:14px; 5 } 6   .accordion > .accordion-header { 7     list-style: none; 8     margin: 0; 9     padding: 0; 10     border-bottom: 1px solid #ddd; 11   } 12     .accordion > .accordion-header.selected > .accordion-header-title { 13       color: #0094ff; 14     } 15     .accordion > .accordion-header > .accordion-header-title { 16       position: relative; 17       width: 100%; 18       height: 35px; 19       line-height: 35px; 20       background: #eee; 21       border-bottom: 1px solid #ccc; 22       cursor: pointer; 23     } 24       .accordion > .accordion-header > .accordion-header-title > i:first-child { 25         font-size: 1.3em; 26       } 27       .accordion > .accordion-header > .accordion-header-title > span { 28         position: relative; 29         top: -1px; 30         left: 5px; 31       } 32     .accordion > .accordion-header > .accordion-content { 33       display: none; 34       width: 100%; 35       height: calc(100% - 35px); 36       margin: 0; 37       padding: 0; 38     } 39     .accordion > .accordion-header.selected > .accordion-content { 40       display: block; 41     } 42 .accordion-content > .accordion-header { 43     list-style: none; 44     margin: 0; 45     padding: 0; 46 } 47   .accordion-content > .accordion-header.selected { 48     color: #0094ff; 49   } 50   .accordion-content > .accordion-header > .accordion-header-title { 51     position: relative; 52     width: 100%; 53     height: 32px; 54     line-height: 32px; 55     cursor: pointer; 56     border-bottom: 1px solid #ccc; 57   } 58     .accordion-content > .accordion-header > .accordion-header-title:hover { 59       background:#eee; 60     } 61     .accordion-content > .accordion-header > .accordion-header-title.selected { 62       color: #fff; 63       background: #0094ff; 64       border-left: 3px solid #ff6a00; 65       border-bottom: 0px; 66     } 67       .accordion-content > .accordion-header > .accordion-header-title > i:first-child { 68         font-size: 1.2em; 69       } 70       .accordion-content > .accordion-header > .accordion-header-title > span { 71         position: relative; 72         top: -1px; 73         left: 5px; 74       } 75       .accordion-content > .accordion-header > .accordion-header-title.selected > i:first-child { 76         position:relative; 77         left:-3px; 78       } 79       .accordion-content > .accordion-header > .accordion-header-title.selected > span { 80         position: relative; 81         top: -1px; 82         left: 2px; 83       } 84     .accordion-content > .accordion-header > .accordion-content { 85       display: none; 86       width: 100%; 87       height: calc(100% - 32px); 88       margin: 0; 89       padding: 0; 90     } 91     .accordion-content > .accordion-header.selected > .accordion-content { 92       display: block; 93     }

原标题：基于jQuery实现的Accordion手风琴自定义插件

关键词：jquery