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')

        })

    }

js实现 表单逐级展开效果_第1张图片

你可能感兴趣的:(JavaScript,javascript,前端)