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

2020-05-27 17:55:17易采站长站整理

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

下面老规矩,直接贴代码:


(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);