目前網上有很多各種各樣的手風琴插件，但是沒有一個完整實現了的側菜單，今天寫了一個可以無限子節點的手風琴側菜單，有需要的可以參考一下，有什麼好的想法可以留言。（沒有經過徹底測試，不過問題應該不大）
下面老規矩，直接貼代碼：
(function ($) {
'use strict';
var defaults = {
url: null,
param: {},
data: {},
fill: true,
level_space: 15,
onitemclick: null,
style: {
header: "accordion-header",
header_title: "accordion-header-title",
content: "accordion-content",
selected: "selected",
icon_base: "fa",
icon_collapse: "fa-angle-up",
icon_expand: "fa-angle-down"
}
}
var methods = {
init: function (options) {
return this.each(function () {
var $this = $(this);
if (!$this.hasClass("accordion")) {
$this.addClass("accordion");
}
var settings = $this.data('tw.accordion');
if (typeof (settings) == 'undefined') {
settings = $.extend({}, defaults, options);
$this.data('tw.accordion', settings);
} else {
settings = $.extend({}, settings, options);
$this.data('tw.accordion', settings);
}
if (settings.url) {
$.ajax({
type: "post",
async: false,
url: settings.url,
data: settings.param,
success: function (data) {
settings.data = data;
}
});
}
if (settings.fill) {
$this.height("100%");
}
if (settings.data.length > 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 = $("<li class='" + settings.style.header + "'></li>");
item.data("data", data);
var header = $("<div class='" + settings.style.header_title + "' data-accordion='" + data.id + "'>" +
"<i class='" + settings.style.icon_base + "" + data.icon + "'></i>" +
"<span>" + data.name + "</span></div>");
header.css("padding-left", settings.level_space * data.level);
item.append(header);
if (data.childrens) {
var toggle = $("<i class='" + settings.style.icon_base + "" + settings.style.icon_collapse + "'></i>");
toggle.css({ "font-size": "1.4em", "position": "absolute", "top": "7px", "right": "7px" });
header.append(toggle);
var content = $("<ul class='" + settings.style.content + "'></ul>");
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 {
margin:0;
padding:0;
font-size:14px;
}
.accordion > .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;
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。