目前网上有很多各种各样的手风琴插件，但是没有一个完整实现了的侧菜单，今天写了一个可以无限子节点的手风琴侧菜单，有需要的可以参考一下，有什么好的想法可以留言。（没有经过彻底测试，不过问题应该不大）
下面老规矩，直接贴代码：
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 = $("
" +
"" +
"" + data.name + "
");
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 = $(" .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;
}
