基于jQuery实现Accordion手风琴自定义插件
目前网上有很多各种各样的手风琴插件，但是没有一个完整实现了的侧菜单，今天写了一个可以无限子节点的手风琴侧菜单，有需要的可以参考一下，有什么好的想法可以留言。（没有经过彻底测试，不过问题应该不大）
下面老规矩，直接贴代码：
(function($){
'usestrict';
vardefaults={
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"
}
}
varmethods={
init:function(options){
returnthis.each(function(){
var$this=$(this);
if(!$this.hasClass("accordion")){
$this.addClass("accordion");
}
varsettings=$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;
varitem=$this.accordion("add",this);
$this.append(item);
});
if($this.find("."+settings.style.selected).length==0){
vardata=$this.find(">li:first-child").data("data");
$this.accordion("select",data);
}
}
});
},
add:function(data){
var$this=$(this);
varsettings=$this.data("tw.accordion");
varitem=$("<liclass='"+settings.style.header+"'></li>");
item.data("data",data);
varheader=$("<divclass='"+settings.style.header_title+"'data-accordion='"+data.id+"'>"+
"<iclass='"+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){
vartoggle=$("<iclass='"+settings.style.icon_base+""+settings.style.icon_collapse+"'></i>");
toggle.css({"font-size":"1.4em","position":"absolute","top":"7px","right":"7px"});
header.append(toggle);
varcontent=$("<ulclass='"+settings.style.content+"'></ul>");
content.data("count",data.childrens.length);
$.each(data.childrens,function(){
this.level=data.level+1;
varchild=$this.accordion("add",this);
content.append(child);
});
item.append(content);
}
header.click(function(){
$this.accordion("select",data);
});
if(data.selected){
$this.accordion("select",data);
}
returnitem;
},
select:function(data){
var$this=$(this);
varsettings=$this.data("tw.accordion");
varheader=$this.find("[data-accordion='"+data.id+"']");
varitem=header.parent();
if(!header.hasClass(settings.style.selected)&&!item.hasClass(settings.style.selected)){
varsibling=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){
varcount=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);
varsettings=$this.data("tw.accordion");
if(typeofurl=="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(){
varmethod=arguments[0];
varargs=arguments;
if(typeof(method)=='object'||!method){
method=methods.init;
}elseif(methods[method]){
method=methods[method];
args=$.makeArray(arguments).slice(1);
}else{
$.error('Method'+method+'doesnotexistontw.accordion');
returnthis;
}
returnmethod.apply(this,args);
}
})(jQuery);
.accordion{
margin:0;
padding:0;
font-size:14px;
}
.accordion>.accordion-header{
list-style:none;
margin:0;
padding:0;
border-bottom:1pxsolid#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:1pxsolid#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:1pxsolid#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:3pxsolid#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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。