day16--js之后台管理左侧菜单优化

1、对15周的后台管理左侧菜单进行了优化：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
        display:none;
        }
        .item .header{
        height:35px;
        background-color:blue;
        color:white;
        line-height:40px;
        }
    </style>
</head>
<body>
    <div style="height:48px"></div>
    <div style="width:50px">
        <div class="item">
            <div class="header" onclick="ChangeMenu(this);">菜单1</div>   //去调id标签，参数由i1改为this
            <div class="content">
                <div>内容1</div>
                <div>内容1</div>
                <div>内容1</div>
            </div>
        </div>
        <div class="item">
            <div class="header" onclick="ChangeMenu(this);">菜单2</div>
            <div class="content hide">
                <div>内容2</div>
                <div>内容2</div>
                <div>内容2</div>
            </div>
        </div>
        <div class="item">
            <div class="header" onclick="ChangeMenu(this);">菜单3</div>
            <div class="content hide">
                <div>内容3</div>
                <div>内容3</div>
                <div>内容3</div>
            </div>
        </div>
    </div>
    <script>
        function ChangeMenu(ths){   //将nid参数改为 ths
            //this 全局对象
            current_header=ths;  //将此处的代码由var current_header=document.getElementById(nid);改为现有代码
            var item_list=current_header.parentElement.parentElement.children;  // 找到所有的item标签
            for(var i=0;i<item_list.length;i++){
                var current_item=item_list[i];  // 获取所有的item标签
                current_item.children[1].classList.add('hide');  //找到所有item标签下的第二个孩子标签，即content标签，将hide添加
            }
            current_header.nextElementSibling.classList.remove('hide');  //找到当前header的下一个兄弟标签，将其移除，使其样式显示
        }
    </script>
</body>

 

posted @ 2020-03-31 11:09  凸凸yolotheway  阅读(175)  评论(0)    收藏  举报