伸缩二级菜单——>小案例

功能需求说明：

单击“-”号合并菜单，隐藏子菜单，单击“+”打开菜单，显示子菜单

细节说明：打开菜单的时候，要判断是否有其他菜单打开，如果有请先关闭

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现伸缩二级菜单</title>
    <style>
        li {
            list-style-type: 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>
</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>
<script>
    window.$ = HTMLElement.prototype.$ = function(selector){
        return (this==window?document:this).querySelectorAll(selector);
    }
    function toggle(btn){
        if (btn.className=="open"){
            btn.className = "closed";
            btn.parentNode.$("ul")[0].className = "hide";
        }else {
            //进到这里说明：要打开这级菜单，那么就要先把已经打开的合上
            if ($(".open")[0]){
                $(".open")[0].className = "closed";
                $(".show")[0].className = "hide";
            }
            btn.className = "open";
            btn.parentNode.$("ul")[0].className = "show";
        }
    }
</script>
</html>

伸缩二级菜单——>小案例

猜你喜欢