(精华)2020年6月28日 JavaScript高级篇 侧边栏目录树
【摘要】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<me...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>无限极目录树</title>
<style>
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style-type: none;
}
.toShow {
display: none;
}
.first-menu>.item {
width: 250px;
}
.first-menu .item {
line-height: 35px;
background: orange;
margin-bottom: 1px;
overflow-x: hidden;
margin-top: 1px;
cursor: pointer;
}
.first-menu .item b {
display: block;
position: relative;
}
.first-menu .item b:after {
content: '>';
position: absolute;
right: 10px;
top: 0px;
color: #fff;
font-size: 16px;
font-weight: normal;
}
.first-menu .item ul li {
background: powderblue;
box-sizing: border-box;
padding-left: 30px;
;
}
</style>
</head>
<body>
<div class="box-menu dl" id="boxMenu">
</div>
<script>
var classTool = {
hasClass: function (elem, cls) {
// /toShow/.test(elem.className) //常用
return new RegExp(cls).test(elem.className);
},
addClass: function (elem, cls) {
if (!this.hasClass(elem, cls)) {
elem.className += " " + cls;
}
},
removeClass: function (elem, cls) {
if (this.hasClass(elem, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
elem.className = elem.className.replace(reg, ' ');
}
},
toggleClass(elem, cls) {
if (this.hasClass(elem, cls)) {
this.removeClass(elem, cls);
} else {
this.addClass(elem, cls);
}
}
}
// 解决classList的兼容问题(ie9及以下)
var isClassList = 'classList' in HTMLElement.prototype;
if (!isClassList) {
Object.defineProperty(HTMLElement.prototype, 'classList', {
get: function () {
var _self = this;
var hasClass = function (cls) {
return new RegExp(cls).test(_self.className);
}
return {
add: function (cls) {
if (!this.contains(cls)) {
// if(!hasClass(cls)) {
_self.className += " " + cls;
}
},
contains: function (cls) {
var index = _self.className.indexOf(cls);
return index != -1 ? true : false;
},
remove: function (cls) {
if (!this.contains(cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
_self.className = _self.className.replace(reg, '');
}
},
toggle: function (cls) {
if (!this.contains(cls)) {
this.remove(cls);
} else {
this.add(cls);
}
}
}
}
})
}
var menudata = [{
name: 'AAA',
child: [{
name: 'a1',
child: [{
name: 'a1-1'
}, {
name: 'a1-2'
}]
},
{
name: 'a2'
},
{
name: 'a3',
child: [{
name: 'a3-1'
}, {
name: 'a3-2',
child: [{
name: 'a3-2-1'
}, {
name: 'a3-2-2'
}]
}]
}
]
},
{
name: 'BBB',
child: [{
name: 'b1'
}, {
name: 'b2'
}, {
name: 'b3'
}]
},
{
name: 'CCC',
child: [{
name: 'c1'
}]
},
{
name: 'DDD'
}
];
//1.拼接目录树
//2.渲染到dom节点
//3.添加点击事件
var objTree = {
// boxMenu
init(el, data) {
//2.渲染到dom节点
this.elDom = document.getElementById(el);
this.elDom.innerHTML = this.createTree(data, true);
this.clickFun();
},
createTree(data, isFirst) {
//1.拼接目录树
var mtr = isFirst ? '<ul class="first-menu">' : '<ul class="toShow">';
for (var i = 0, len = data.length; i < len; i++) {
if (data[i].child && data[i].child.length > 0) {
// mtr +='<li class="item"><b>'+data[i].name+'</b>';
mtr += '<li class="item">' + data[i].name;
mtr += this.createTree(data[i].child, false);
mtr += '</li>';
} else {
mtr += '<li class="item">' + data[i].name + '</li>'
}
}
mtr += '</ul>'
return mtr;
},
clickFun() {
this.elDom.addEventListener('click', function (ev) {
ev.stopPropagation(); //阻止事件冒泡
// ev.preventDefault();
var target = ev.target;
var firstE = target.firstElementChild;
if (firstE) {
var operate = /toShow/.test(firstE.className) ? 'remove' : 'add';
firstE.classList[operate]('toShow');
}
}, false);
}
}
objTree.init('boxMenu', menudata);
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
文章来源: codeboy.blog.csdn.net，作者：愚公搬代码，版权归原作者所有，如需转载，请联系作者。
原文链接：codeboy.blog.csdn.net/article/details/106991546
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）