功能需求说明:
单击“-”号合并菜单,隐藏子菜单,单击“+”打开菜单,显示子菜单
细节说明:打开菜单的时候,要判断是否有其他菜单打开,如果有请先关闭
代码实现:
<!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>