原生JS MVC模式书写三级联动

    h5{
        padding-left: 1em;
    }
    h6{
        padding-left: 2em;
    }
    .show{
        display: block;
    }
    .hide{
        display: none;
    }
    
 <div id="root"></div>

！！ 特别注意 模板字符串与${ }的 反复使用，容易出错！！

 <script>
        // M
        var data = [
            {
                title: '学科',
                second: [
                    { title1: '语文', content: ['古代文学', '近代文学'], state: false },
                    { title1: '数学', content: ['几何', '代数'], state: false }
                ],
                state: true
            },
            {
                title: '班级',
                second: [
                    { title1: '实验班', content: ['火箭班', '精英班'], state: false },
                    { title1: '普通班', content: ['一般普通', '特别普通'], state: false }
                ],
                state: false
            },
        ]

        // V
        function render() {
            document.getElementById('root').innerHTML = `
                <div>
                    ${
                data.map((obj, i) => `
                            <h3 class='h3' onclick='state(${i})'>
                                ${obj.title}
                                <!--判断state状态，展示+或--->
                                ${obj.state ? '-' : "+"}
                                ${
                    obj.second.map((obj2, index) => `
                                    <!-- 模板字符串！！！！！！-->
                                        <h5 ${obj.state ? `class='show'` : `class='hide'`} οnclick='state2(${index},${i})'>
                                            ${obj2.title1}
                                            ${obj2.state ? '-' : '+'}
                                            ${
                        obj2.content.map(obj3 => `
                                              <!-- 模板字符串！！！！！！-->
                                                    <h6  ${obj.state && obj2.state ? `class='show'` : `class='hide'`}>${obj3}</h6>
                                                `).join('')
                        }
                                        </h5>
                                    `).join('')
                    }
                            </h3>
                        `).join('')
                }
                </div>
            `
        };
        render();

        // c
        // 一级菜单开关
        state = function (i) {
            data[i].state = !data[i].state;  //改变打开 / 关闭的 + -符号状态
            render();
        };
        // 二级菜单开关
        var flag = false;
        state2 = function (index, i) {
            if (!flag) {
                data[i].second[index].state = true;
                flag = !flag;
            } else {
                data[i].second[index].state = false;
                flag = !flag;
            }
            render()
        };
    </script>