(精华)2020年6月28日 JavaScript高级篇 侧边栏目录树
<!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 ? ' : ''
;
for (var i = 0, len = data.length; i < len; i++) {
if (data[i].child && data[i].child.length > 0) {
// mtr +=''+data[i].name+'';
mtr += '' + data[i].name;
mtr += this.createTree(data[i].child, false);
mtr += '';
} else {
mtr += '' + data[i].name + ''
}
}
mtr += ''
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>