每日一練04：无限极目錄

JS原生獲取節點： 

childNodes; //获取a的全部子节点；
parentNode; //获取a的父节点；
nextSibling; //获取a的下一个兄弟节点
previousSibling; //获取a的上一个兄弟节点
firstChild; //获取a的第一个子节点
lastChild; //获取a的最后一个子节点

CSS：

 ul {
            width: 200px;
            margin: 0;
            padding: 0;
        }

        b {
            width: 100%;
            display: block;
        }

        li {
            list-style: none;
        }

        li.one {
            background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);
            font-weight: bold
        }

        .twoul {
            display: none;
        }

        .one>ul {
            background-image: linear-gradient(to top, #feada6 0%, #f5efef 100%);

        }

        .one>ul>.two {
            background-image: linear-gradient(to top, #c1dfc4 0%, #deecdd 100%);
        }

        .one>ul>.two>ul {
            background-image: linear-gradient(to top, #feada6 0%, #f5efef 100%);
        }

HTML：

<div id="wipper"></div>

JS公共方法：

 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);
                }
            }
        }

參考：原生js实现添加删除和查询元素的class

JS方法一：

var data = [
            {
                name: '精油推拿',
                child: [{ name: '價格129元', child: [{ name: '檸檬精油' }, { name: '桂花精油' }] }, { name: '價格139元' }, { name: '價格149元', child: [{ name: '薰衣草精油' }, { name: '泰式精油', child: [{ name: '泰式精油1' }, { name: '泰式精油2' }] }] }]
            },
            { name: '足部按摩', child: [{ name: '燃脂排毒' }, { name: '活血養氣' }, { name: '排毒養顔' }] },
            { name: '臉部SAP', child: [{ name: '緊致肌膚' }, { name: '美白美顔' }, { name: '祛痘美膚' }] },
            { name: '全身按摩', child: [{ name: '全身推拿' }] }],
            flag = true,
            tree1 = {
                init(data, flag) {
                    wipper.innerHTML = tree1.tree(data, flag);
                    this.clickFun();
                },
                tree(obj, flag) {
                    var str = flag ? '<ul class="oneul">' : '<ul class="twoul">';
                    for (var i in obj) {
                        if (obj[i].child && obj[i].child.length > 0) {                   
                            str += `<li class=${flag ? "one" : "two"}><b>${obj[i].name}</b>${this.tree(obj[i].child)}</li>`
                        } else {
                            str += `<li class=${flag ? "one" : "two"}>${obj[i].name}</li>`
                        }
                    }
                    str += `</ul>`;
                    return str;
                },
                clickFun() {
                    wipper.addEventListener('click', (e) => {
                        e.stopPropagation();//阻止事件冒泡
                        e.preventDefault();
                        var target = e.target,
                            ulmenu = target.nextSibling;
                        if (target.tagName.toUpperCase() == 'B') {
                            if (/twoul/.test(ulmenu.className)) {
                                classTool.removeClass(ulmenu, 'twoul')
                            } else {
                                classTool.addClass(ulmenu, 'twoul')
                            }
                            // classTool.toggleClass(ulmenu,'twoul')
                        }
                    })
                }

            }

        tree1.init(data, flag);

       

JS方法二：

 var data = [
            {
                name: '精油推拿',
                child: [{ name: '價格129元', child: [{ name: '檸檬精油' }, { name: '桂花精油' }] }, { name: '價格139元' }, { name: '價格149元', child: [{ name: '薰衣草精油' }, { name: '泰式精油', child: [{ name: '泰式精油1' }, { name: '泰式精油2' }] }] }]
            },
            { name: '足部按摩', child: [{ name: '燃脂排毒' }, { name: '活血養氣' }, { name: '排毒養顔' }] },
            { name: '臉部SAP', child: [{ name: '緊致肌膚' }, { name: '美白美顔' }, { name: '祛痘美膚' }] },
            { name: '全身按摩', child: [{ name: '全身推拿' }] }],
            flag = true,
            tree1 = {
                tree(obj, flag) {
                    var str = flag ? '<ul class="oneul">' : '<ul class="twoul">';
                    for (var i in obj) {
                        if (obj[i].child && obj[i].child.length > 0) {
                            str += `<li class=${flag ? "one" : "two"}><b>${obj[i].name}</b>${this.tree(obj[i].child)}</li>`
                        } else {
                            str += `<li class=${flag ? "one" : "two"}>${obj[i].name}</li>`
                        }
                    }
                    str += `</ul>`;
                    return str;
                },

            }

        wipper.innerHTML = tree1.tree(data, flag);
        function clickFun() {
            wipper.addEventListener('click', (e) => {
                e.stopPropagation();//阻止事件冒泡
                e.preventDefault();
                var target = e.target,
                    ulmenu = target.nextSibling;
                if (target.tagName.toUpperCase() == 'B') {
                    if(/twoul/.test(ulmenu.className)){
                        classTool.removeClass(ulmenu,'twoul')
                    }else{
                        classTool.addClass(ulmenu,'twoul')
                    }
                    // classTool.toggleClass(ulmenu,'twoul')
                }
            })
        }
        clickFun();

JS方法三（不要b標籤）

 var data = [
            {
                name: '精油推拿',
                child: [{ name: '價格129元', child: [{ name: '檸檬精油' }, { name: '桂花精油' }] }, { name: '價格139元' }, { name: '價格149元', child: [{ name: '薰衣草精油' }, { name: '泰式精油', child: [{ name: '泰式精油1' }, { name: '泰式精油2' }] }] }]
            },
            { name: '足部按摩', child: [{ name: '燃脂排毒' }, { name: '活血養氣' }, { name: '排毒養顔' }] },
            { name: '臉部SAP', child: [{ name: '緊致肌膚' }, { name: '美白美顔' }, { name: '祛痘美膚' }] },
            { name: '全身按摩', child: [{ name: '全身推拿' }] }],
            flag = true,
            tree1 = {
                tree(obj, flag) {
                    var str = flag ? '<ul class="oneul">' : '<ul class="twoul">';
                    for (var i in obj) {
                        if (obj[i].child && obj[i].child.length > 0) {
                            // str += `<li class=${flag ? "one" : "two"}><b>${obj[i].name}</b>${this.tree(obj[i].child)}</li>`
                            str += `<li class=${flag ? "one" : "two"}>${obj[i].name}${this.tree(obj[i].child)}</li>`
                        } else {
                            str += `<li class=${flag ? "one" : "two"}>${obj[i].name}</li>`
                        }
                    }
                    str += `</ul>`;
                    return str;
                },
            }

        wipper.innerHTML = tree1.tree(data, flag);
        function clickFun() {
            wipper.addEventListener('click', (e) => {
                e.stopPropagation();//阻止事件冒泡
                e.preventDefault();
                var target = e.target,
                    ulmenu = target.firstElementChild;//是否有子菜單
                if (ulmenu) {
                    //方法一
                    if(/twoul/.test(ulmenu.className)){
                        ulmenu.classList.remove('twoul')
                    }else{
                        ulmenu.classList.add('twoul')
                    }
                    //方法二
                    //var states = /twoul/.test(ulmenu.className) ? 'remove' : 'add';
                    //ulmenu.classList[states]('twoul');
                }
            })
        }
        clickFun();

classList 兼容性不好,支持classList的浏览器有Firefox3.6+和chrome和IE10+。

參考：HTML DOM classList 属性

效果如下：