0) { $this.data("count",settings.data.length); $.each(settings.data,function () { this.level = 1; var item = $this.accordion("add",this); $this.append(item); }); if ($this.find("." + settings.style.selected).length == 0) { var data = $this.find(">li:first-child").data("data"); $this.accordion("select",data); } } }); },add: function (data) { var $this = $(this); var settings = $this.data("tw.accordion"); var item = $("

"); item.data("data",data); var header = $(""); header.css("padding-left",settings.level_space * data.level); item.append(header); if (data.childrens) { var toggle = $(""); toggle.css({ "font-size": "1.4em","position": "absolute","top": "7px","right": "7px" }); header.append(toggle); var content = $("

"); content.data("count",data.childrens.length); $.each(data.childrens,function () { this.level = data.level + 1; var child = $this.accordion("add",this); content.append(child); }); item.append(content); } header.click(function () { $this.accordion("select",data); }); if (data.selected) { $this.accordion("select",data); } return item; },select: function (data) { var $this = $(this); var settings = $this.data("tw.accordion"); var header = $this.find("[data-accordion='" + data.id + "']"); var item = header.parent(); if (!header.hasClass(settings.style.selected) && !item.hasClass(settings.style.selected)) { var sibling = item.siblings(); sibling.removeClass(settings.style.selected).children("." + settings.style.selected).removeClass(settings.style.selected); sibling.children("." + settings.style.icon_expand).removeClass(settings.style.icon_expand).addClass(settings.style.icon_collapse); if (data.childrens) { item.addClass(settings.style.selected); header.find("." + settings.style.icon_collapse).removeClass(settings.style.icon_collapse).addClass(settings.style.icon_expand); if (settings.fill) { var count = item.parent().data("count") - 1; item.css("height","calc(100% - " + (item.height() * count) + "px)"); } } else { header.addClass(settings.style.selected); } } if (settings.onitemclick) { settings.onitemclick(data); } },update: function (url,param) { var $this = $(this); var settings = $this.data("tw.accordion"); if (typeof url == "object") { settings.param = url; } else { settings.url = url; settings.param = param; } $this.accordion("init",settings); },destroy: function (options) { return $(this).each(function () { var $this = $(this); $this.removeData('accordion'); }); } } $.fn.accordion = function () { var method = arguments[0]; var args = arguments; if (typeof (method) == 'object' || !method) { method = methods.init; } else if (methods[method]) { method = methods[method]; args = $.makeArray(arguments).slice(1); } else { $.error('Method ' + method + ' does not exist on tw.accordion'); return this; } return method.apply(this,args); } })(jQuery);

.accordion-header { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid #ddd; } .accordion > .accordion-header.selected > .accordion-header-title { color: #0094ff; } .accordion > .accordion-header > .accordion-header-title { position: relative; width: 100%; height: 35px; line-height: 35px; background: #eee; border-bottom: 1px solid #ccc; cursor: pointer; } .accordion > .accordion-header > .accordion-header-title > i:first-child { font-size: 1.3em; } .accordion > .accordion-header > .accordion-header-title > span { position: relative; top: -1px; left: 5px; } .accordion > .accordion-header > .accordion-content { display: none; width: 100%; height: calc(100% - 35px); margin: 0; padding: 0; } .accordion > .accordion-header.selected > .accordion-content { display: block; } .accordion-content > .accordion-header { list-style: none; margin: 0; padding: 0; } .accordion-content > .accordion-header.selected { color: #0094ff; } .accordion-content > .accordion-header > .accordion-header-title { position: relative; width: 100%; height: 32px; line-height: 32px; cursor: pointer; border-bottom: 1px solid #ccc; } .accordion-content > .accordion-header > .accordion-header-title:hover { background:#eee; } .accordion-content > .accordion-header > .accordion-header-title.selected { color: #fff; background: #0094ff; border-left: 3px solid #ff6a00; border-bottom: 0px; } .accordion-content > .accordion-header > .accordion-header-title > i:first-child { font-size: 1.2em; } .accordion-content > .accordion-header > .accordion-header-title > span { position: relative; top: -1px; left: 5px; } .accordion-content > .accordion-header > .accordion-header-title.selected > i:first-child { position:relative; left:-3px; } .accordion-content > .accordion-header > .accordion-header-title.selected > span { position: relative; top: -1px; left: 2px; } .accordion-content > .accordion-header > .accordion-content { display: none; width: 100%; height: calc(100% - 32px); margin: 0; padding: 0; } .accordion-content > .accordion-header.selected > .accordion-content { display: block; }