JS 基础篇(无极限目录树，侧边栏菜单）
<!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 src="./main.js"></script>
<script>
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 nextUl = target.parentElement.querySelector('ul');
// var nextUl = target.nextElementSibling;
//有b的时候
// if(target.tagName.toUpperCase()=='B'){
// // if(/toShow/.test(nextUl.className)){
// // classTool.removeClass(nextUl,'toShow');
// // } else {
// // classTool.addClass(nextUl,'toShow');
// // }
// classTool.toggleClass(nextUl,'toShow');
// }
var firstE = target.firstElementChild;
if (firstE) {
//显示隐藏
// if(/toShow/.test(firstE.className)){
// firstE.classList.remove('toShow')
// } else {
// firstE.classList.add('toShow');
// }
var operate = /toShow/.test(firstE.className) ? 'remove' : 'add';
firstE.classList[operate]('toShow');
}
}, false);
}
}
objTree.init('boxMenu', menudata);
</script>
</body>
</html>
main.js
//classList //兼容性不好,支持classList的浏览器有Firefox3.6+和chrome和IE10+。
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);
}
}
}
}
})
}