本教程介绍了jQuery教程Accordion自定义插件的详细说明。希望你看完这篇文章能有所收获，帮助你对jQuery有更深入的了解。
& lt
目前网上手风琴插件的种类很多，但是没有一个完全实现的侧菜单。今天写了一个手风琴式的边菜单，子节点不限。需要的话可以参考。如果你有什么好主意，可以留言。(没有经过彻底测试，但问题应该不大)
以下旧规则，直接贴出代码:
1(函数($) {
2‘使用严格’；
3 var默认值= {
4 url: null，
5参数:{}，
6数据:{}，
7填充:真，
8级_空间:15、
9 onimclick:null，
10风格:{
11表头:“手风琴式表头”，
12 header_title:“手风琴-header-title”，
13内容:“手风琴——内容”，
14选中:"选中"、
15 icon _ base:“fa”，
16 icon _ collapse:“fa-angle-up”，
17 icon _ expand:“fa-angle-down”
18 }
19 }
20种var方法= {
21 init:函数(选项){
22返回this.each(function () {
23 var $ this = $(this)；
24 if(！$this.hasClass("手风琴"){
25美元this.addClass("手风琴")；
26 }
27 var settings = $ this . data(' tw . accordion ')；
28 if(type of(settings)= ' undefined '){
29设置= $。extend({}，默认值，选项)；
30美元this.data('tw.accordion '，settings)；
31 }其他{
32设置= $。extend({}，设置，选项)；
33美元this.data('tw.accordion '，settings)；
34 }
35 if (settings.url) {
36 $.ajax({
37式:“岗位”，
38 async: false，
39 url: settings.url，
40数据:settings.param，
41成功:功能(数据){
42 settings.data = data
43 }
44 });
45 }
46 if(设置.填充){
47美元this . height(" 100% ")；
48 }
49 if(settings . data . length & gt；0) {
50美元this.data("count "，settings . data . length)；
51 $.每个(settings.data，function () {
52 this . level = 1；
53 var item = $this.accordion("add "，this)；
54美元this . append(item)；
55 });
56 if ($this.find("。"+ settings.style.selected)。length == 0) {
57 var data = $ this . find(" & gt；李:第一个孩子)。数据(“数据”)；
58美元this.accordion("select "，data)；
59 }
60 }
61 });
62 },
63 add: function (data) {
64 var $ this = $(this)；
65 var settings = $ this . data(" tw . accordion ")；
66 var item = $(" & lt；Li class = ' "+settings . style . header+" ' >& lt/Li & gt；");
67 item.data("数据"，数据)；
68 var header = $(" & lt；div class = ' "+settings . style . header _ title+" ' data-accordion = ' "+data . id+" ' >;+
69 " & ltI class = ' "+settings . style . icon _ base+" "+data . icon+" ' >;& lt/i >+
70 " & ltspan & gt”+data . name+" & lt；/span>。& lt/div >);
71 header.css("padding-left "，settings . level _ space * data . level)；
72 item.append(表头)；
73 if(data . children){
74 var toggle = $(" & lt；I class = ' "+settings . style . icon _ base+" "+settings . style . icon _ collapse+" ' >;& lt/i >);
75 toggle . CSS({ " font-size ":" 1.4em "，" position": "absolute "，" top": "7px "，" right ":" 7px " })；
76 header . append(toggle)；
77 var content = $(" & lt；ul class = ' "+settings . style . content+" ' >& lt/ul & gt；");
78 content.data("count "，data . children . length)；
79 $.每个(data.childrens，function () {
80 this . level = data . level+1；
81 var child = $ this . accordion(" add "，this)；
82 content.append(子)；
83 });
84 item . append(content)；
85 }
86 header.click(function () {
87美元this.accordion("select "，data)；
88 });
89 if (data.selected) {
90美元this.accordion("select "，data)；
91 }
92退货项目；
93 },
94选择:功能(数据){
95 var $ this = $(this)；
96 var settings = $ this . data(" tw . accordion ")；
97 var header = $ this . find("[data-accordion = ' "+data . id+" ']")；
98 var item = header . parent()；
99 if(！header . HasClass(settings . style . selected)& amp；& amp！item . HasClass(settings . style . selected)){
100 var sibling = item . siblings()；
101 sibling . remove CLaSS(settings . style . selected)。儿童("。"+ settings.style.selected)。remove CLaSS(settings . style . selected)；
102兄妹("。"+ settings.style.icon_expand)。remove CLaSS(settings . style . icon _ expand)。add CLaSS(settings . style . icon _ collapse)；
103 if(data . children){
104 item . addCLaSS(settings . style . selected)；
105 header.find(" . "+ settings.style.icon_collapse)。remove CLaSS(settings . style . icon _ collapse)。add CLaSS(settings . style . icon _ expand)；
106 if(设置.填充){
107 var count = item.parent()。数据(“计数”)-1；
108 item.css("height "，" calc(100%-"+(item . height()* count)+" px ")；
109 }
110 } else {
111 header . AddClass(settings . style . selected)；
112 }
113 }
114 if(settings . onemclick){
115 settings.onitemclick(数据)；
116 }
117 },
118更新:函数(url，param) {
119 var $ this = $(this)；
120 var settings = $this.data("tw .手风琴")；
121 if (typeof url == "object") {
122 settings.param = url
123 } else {
124 settings.url = url
125设置. = param
126 }
127美元this.accordion("init "，settings)；
128 },
129销毁:功能(选项){
130退货$(这个)。每个(函数(){
131 var $ this = $(this)；
132美元this.removeData('手风琴')；
133 });
134 }
135 }
136 $.fn.accordion = function () {
137 var方法=自变量[0]；
138 var args =自变量；
139 if(type of(method)= ' object ' | |！方法){
140 method = methods.init
141 }否则if (methods[method]) {
142 method = methods[method]；
143个args = $。makeArray(参数)。切片(1)；
144 } else {
145 $.错误('方法'+方法+'在tw.accordion上不存在')；
146退这个；
147 }
148 return method.apply(this，args)；
149 }
150 })(jQuery)；
1 .手风琴{
2边距:0；
3填充:0；
4 font-size:14px；
5 }
6 .手风琴。。手风琴式标题{
7列表式:无；
8边距:0；
9填充:0；
10边框-底部:1px实心# ddd
11 }
12 .手风琴。。accordion-header.selected >。。手风琴-标题-标题{
13色:# 0094ff
14 }
15 .手风琴。。手风琴式-- header & gt；。手风琴-标题-标题{
16位置:相对；
17宽度:100%；
18高:35px
19行高:35px
20背景:# eee
21边框-底部:1px实心# ccc
22光标:指针；
23 }
24 .手风琴。。手风琴式-- header & gt；。手风琴-标题-标题>。I:第一个孩子{
25 font-size:1.3em；
26 }
27 .手风琴。。手风琴式-- header & gt；。手风琴-标题-标题>。span {
28位置:相对；
29顶:-1px；
左30:5px；
31 }
32 .手风琴。。手风琴式-- header & gt；。手风琴-内容{
33显示:无；
34宽度:100%；
35高:calc(100%-35px)；
36边距:0；
37填充:0；
38 }
39 .手风琴。。accordion-header.selected >。。手风琴-内容{
40显示:块；
41 }
42 .accordion-content >。。手风琴式标题{
43列表式:无；
44边距:0；
45填充:0；
46 }
47 .accordion-content >。。accordion-header.selected {
48色:# 0094ff
49 }
50 .accordion-content >。。手风琴式-- header & gt；。手风琴-标题-标题{
51位置:相对；
52宽度:100%；
53身高:32px
54行高:32px
55光标:指针；
56边框-底部:1px实心# ccc
57 }
58 .accordion-content >。。手风琴式-- header & gt；。手风琴-标题-标题:悬停{
59背景:# eee
60 }
61 .accordion-content >。。手风琴式-- header & gt；。accordion-header-title . selected {
62色:# fff
63背景:# 0094ff
64边框-左侧:3px实心# ff6a00
65边框-底部:0px
66 }
67 .accordion-content >。。手风琴式-- header & gt；。手风琴-标题-标题>。I:第一个孩子{
68 font-size:1.2em；
69 }
70 .accordion-content >。。手风琴式-- header & gt；。手风琴-标题-标题>。span {
71位置:相对；
72顶:-1px；
73左:5px
74 }
75 .accordion-content >。。手风琴式-- header & gt；。accordion-header-title . selected & gt。I:第一个孩子{
76位置:相对；
77左:-3px；
78 }
79 .accordion-content >。。手风琴式-- header & gt；。accordion-header-title . selected & gt。span {
80°位置:相对；
81顶:-1px；
82左:2px
83 }
84 .accordion-content >。。手风琴式-- header & gt；。手风琴-内容{
85显示:无；
86宽度:100%；
87高:calc(100%-32px)；
88边距:0；
89填充:0；
90 }
91 .accordion-content >。。accordion-header.selected >。。手风琴-内容{
92显示:块；
93 }
本文按专业坐标组织出版，希望对学生有所帮助。详情请关注专业坐标WEB前端的jQuery通道！
1.《accordion jQuery教程 Accordion手风琴自定义插件详解》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。
2.《accordion jQuery教程 Accordion手风琴自定义插件详解》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。
3.文章转载时请保留本站内容来源地址，https://www.lu-xu.com/caijing/1022113.html
