JS 基础篇(无极限目录树,侧边栏菜单)

前端 专栏收录该内容
38 篇文章 1 订阅
<!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 ? '<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 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); 
                    } 
                }
            }
        }
    })
}
  • 2
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值