js 收展二级下拉菜单

「这是我参与2022首次更文挑战的第23天，活动详情查看：2022首次更文挑战」。

在我们的后台管理主页，通常会需要一个方便查看以及跳转的菜单，通常会有2级菜单甚至更多，当他们全部展开的时候，会显得很拖沓，自己一个一个关会很麻烦，我们可以使用js去控制菜单的展开状态。我们今天的案例仅假设每个二级菜单的内容一样个数。

主要逻辑就是把二级菜单放到一级菜单里面，此时菜单状态是全部打开的，我们将二级菜单设置为超出隐藏，改变一级菜单的高度为加上二级菜单的高度时，二级菜单就会全部显示出来，通过一级菜单的内容是否被点击控制该一级菜单的高度。

首先创建一个菜单全部目录div，通过分层级将它们区分开来

 <div class="menu">
        <ul class="nav-1">
            <li class="list-1">
                <a href="#">HTML+CSS</a>
                <ul class="nav-2">
                    <li class="list-2">1</li>
                    <li class="list-2">2</li>
                    <li class="list-2">3</li>
                    <li class="list-2">4</li>
                </ul>
            </li>
            <li class="list-1">
                <a href="#">JavaScript</a>
                <ul class="nav-2">
                    <li class="list-2">1</li>
                    <li class="list-2">2</li>
                    <li class="list-2">3</li>
                    <li class="list-2">4</li>
                </ul>
            </li>
             <li class="list-1">
                <a href="#">HTML+CSS</a>
                <ul class="nav-2">
                    <li class="list-2">1</li>
                    <li class="list-2">2</li>
                    <li class="list-2">3</li>
                    <li class="list-2">4</li>
                </ul>
            </li>
            <li class="list-1">
                <a href="#">JavaScript</a>
                <ul class="nav-2">
                    <li class="list-2">1</li>
                    <li class="list-2">2</li>
                    <li class="list-2">3</li>
                    <li class="list-2">4</li>
                </ul>
            </li>
        </ul>
    </div>

改变一下全局的样式, 把浏览器默认的间隙取消，a链接下的下划线也取消

        *{
            margin: 0 ;
            padding: 0 ;
        }
        a{
            text-decoration: none;
            color: white;
        }

可以根据情况给menu（整个菜单）设置大小以及背景颜色， 给一级菜单、二级菜单设置一样大小的（ width: 150px; height: 40px;）， 展开的效果其实就是通过控制上一级 list-1 的高度，list-1有多高，我就只能显示多少二级菜单的内容（overflow: hidden; 超出隐藏 ），高度改变的时候会有一个过渡动画，显得不那么生硬（transition: height 0.6s;），鼠标滑过二级菜单的时候，改变该二级菜单颜色

        .nav-1 .list-1{
            width: 150px;
            height: 40px;
            background-color: yellow;
            margin-top: 1px;
            overflow: hidden; 
            transition: height 0.6s; 
        }
        .list-1 a{
            display: block;
            text-align: center;
            line-height: 40px;
        }
        .nav-2 .list-2{
            display: block;
            width: 150px;
            height: 40px;
            text-align: center;
            line-height: 40px;
        }
        .list-2:hover{
            background-color: rgb(148, 148, 245);
        }

querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回数组对象。

o_a 为一级菜单中每个菜单的内容， o_list为一级菜单的每个菜单

var o_a = document.querySelectorAll('a') ;
var o_list = document.querySelectorAll('.list-1') ;

遍历每一个一级菜单中菜单的内容，当它被点击时，把全部的一级菜单关闭（ o_list[j].style.height = 40 + "px" ;), 并改变当前被点击菜单的大小 （ o_list[i].style.height = 200 + "px" ; ）

200px是因为一级菜单的高度40 + 4*40（每个二级菜单）= 200

这里设置 flag 的原因是给它做一个标记，使点击该一级菜单能够打开，也能够关闭

        for( let i = 0 ; i < o_a.length ; i++ ){
            o_a[i].flag = true ;
            o_a[i].onclick = function(){
                if( this.flag ){
                    for( let j = 0 ; j < o_list.length ;j++ ){
                        o_list[j].style.height = 40 + "px" ;
                    }
                    o_list[i].style.height = 200 + "px" ;
                }else{
                    o_list[i].style.height = 40 + "px" ;
                }
                this.flag = !this.flag ;
            }
        }