后台伸缩二级菜单

来源：互联网发布：淘宝店卖零食编辑：程序博客网时间：2024/04/30 05:35
<!DOCTYPE HTML><html><head>    <title>实现后台伸缩二级菜单</title>    <meta charset="utf-8" />    <style>        li{            list-style:none;        }        li span{            padding-left: 20px;            cursor: pointer;        }        .open{ background: url("img/minus.png") no-repeat center left; }        .closed{ background: url("img/add.png") no-repeat center left; }        .show{ display: block; }        .hide{ display: none; }    </style>    <script>        function toggle(span){//span->this            if(span.className=="open"){                span.className="closed";                span.nextElementSibling.className="hide";            }else{//否则                var oldSpan= document.querySelector(".open");                if(oldSpan!=null){                    oldSpan.className="closed";                    oldSpan.nextElementSibling.className="hide";                }                span.className="open";                span.nextElementSibling.className="show"            }        }    </script></head><body><ul class="tree">    <li>        <span class="open" onclick="toggle(this)">考勤管理</span>        <ul class="show">            <li>日常考勤</li>            <li>请假申请</li>            <li>加班/出差</li>        </ul>    </li>    <li><span class="closed" onclick="toggle(this)">信息中心</span>        <ul class="hide">            <li>通知公告</li>            <li>公司新闻</li>            <li>规章制度</li>        </ul>    </li>    <li><span class="closed" onclick="toggle(this)">协同办公</span>        <ul class="hide">            <li>公文流转</li>            <li>文件中心</li>            <li>内部邮件</li>            <li>即时通信</li>            <li>短信提醒</li>        </ul>    </li></ul></body></html>
0 0