js实现 表单逐级展开效果

HTML部分展示：

       

•             解决方案11

             

                 

  •                     通用解决方案01

                       

                           

    • 网络安全1

                           

    •  网络防护1

                           

    •  云防火墙1

                       

                   

                 

  •                     通用解决方案02

                       

                           

    • 网络安全2

                           

    • 网络防护2 

                           

    • 云防火墙2

                       

                   

                 

  •                     通用解决方案03

                       

                           

    • 网络安全3

                           

    • 网络防护3

                           

    • 云防火墙3 

                       

             

         

       

•             解决方案22

             

                 

  •                     通用解决方案04

                       

                           

    • 网络安全4 

                           

    • 网络防护4

                           

    • 云防火墙4

                       

                   

                 

  •                     通用解决方案05

                       

                           

    • 网络安全5

                           

    • 网络防护5

                           

    •  云防火墙5

                       

                   

                 

  •                     通用解决方案06

                       

                           

    • 网络安全6 

                           

    • 网络防护6

                           

    • 云防火墙6
     

                        

             

         

css部分：

*{

        /*首先清除页面其他效果*/

        margin: 0;

        padding: 0px;

        list-style: none;

}

    .second-menu-container{

        /*设置相对位置*/

        display: none;

        position:absolute;

        left: 200px;

        top: 0px;

    }

    .third-menu-container{

        display: none;

        position: absolute;

        left: 200px;

        top: 0px;

    }

    .third-menus{

        width: 200px;

    }

    .first-menus{

        width: 200px;

        padding-top: 10px;

        padding-bottom: 10px;

        border-top: 1px solid rgb(169, 169, 187);

    }

    .second-menus{

        width: 200px;

        padding-top: 10px;

        padding-bottom: 10px;

        border-top: 1px solid rgb(169, 169, 187);

    }

    .third-menus{

        width: 200px;

        padding-top: 10px;

        padding-bottom: 10px;

        border-top: 1px solid rgb(169, 169, 187);

    }

    .first-menu-active{

        /*以下二级三级效果类似*/

         /*添加箭头效果，暂时以>代替，若有其他需求，最好使用图标*/

        background-color: rgb(174, 193, 211);

    }

    .first-menu-active::after{

        content: ">";

        float: right;

        margin-right: 10px;

    }

    .second-menu-active{

        background-color: rgb(174, 193, 211);

    }

    .second-menu-active::after{

        /*添加箭头效果，暂时以>代替，若有其他需求，最好使用图标*/

        content: ">";

        float: right;

        margin-right: 10px;

    }

    .third-menu-active{

        /*添加选中颜色*/

        background-color: rgb(174, 193, 211);

    }

js部分：

//一级效果js

//一级与二三级实现方法类似，只用换掉classname即可

var firstMenus = document.getElementsByClassName('first-menus')

    for (let i = 0; i < firstMenus.length; i++) {

        firstMenus[i].addEventListener('click',function(){

            //激活效果

            for (let k = 0; k

                //实现点击下一级后上一级颜色消失

                firstMenus[k].classList.remove('first-menu-active')

            }

            this.classList.add('first-menu-active')

            //收起

            var secondMenuContainer =document.getElementsByClassName('second-menu-container')

            for (let j = 0; j < secondMenuContainer.length; j++) {

                secondMenuContainer[j].style.display='none'

            }

            //展开

            var ul = this.getElementsByClassName('second-menu-container')[0]

            ul.style.display='block'

        })

    }

//二级

    var secondMenus = document.getElementsByClassName('second-menus')

    for (let x = 0; x < secondMenus.length; x++) {

        secondMenus[x].addEventListener('click',function(){

            //激活

            for (let k = 0; k

                secondMenus[k].classList.remove('second-menu-active')

            }

            this.classList.add('second-menu-active')

            //收起

            var thirdMenuContainer =document.getElementsByClassName('third-menu-container')

            for (let y = 0; y < thirdMenuContainer.length; y++) {

                thirdMenuContainer[y].style.display='none'

            }

            //展开

            var thirdMenuContainer = this.getElementsByClassName('third-menu-container')[0]

            thirdMenuContainer.style.display='block'

        })

    }

//三级

    var thirdMenus = document.getElementsByClassName('third-menus')

    for (let x = 0; x < thirdMenus.length; x++) {

        thirdMenus[x].addEventListener('click',function(){

            //激活

            for (let k = 0; k

                thirdMenus[k].classList.remove('third-menu-active')

            }

            this.classList.add('third-menu-active')

        })

    }