• 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="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>
  • 相关阅读:
    正则表达式的贪婪匹配(.*)和非贪婪匹配(.*?)
    jQuery + css 公告从左往右滚动
    C# process 使用方法
    存储过程与SQL的结合使用
    img标签的方方面面
    kibana 5.0.0-alpha5 安装
    es5.0 v5.0.0-alpha 编译安装
    奇怪的hosts文件
    阿里云 api 的文档拼写错误
    centos 7 systemd docker http proxy
  • 原文地址:https://www.cnblogs.com/wuxiaoru/p/12603789.html
Copyright © 2020-2023  润新知