要求
1、点击一级菜单，如果当前二级菜单是打开状态则二级菜单收起，小图标变成+
如果当前二级菜单是关闭状态则展开二级菜单，小图标变成- 并且收起其他的二级菜单
2、页面中的二级菜单最多只能有一个是展开状态
方法一：
<html>
<head>
<title>1. 实现伸缩二级菜单</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 type="text/javascript">
window.onload = function (){
var Allspan = document.getElementsByTagName('span');
for(var i = 0 ; i<Allspan.length; i++){
Allspan[i].onclick=function(){
if(this.className =="open"){
this.className = "closed";
this.nextElementSibling.className="hide";
}else{
var span = document.querySelector("ul.tree span.open");
if(span){
span.className="closed";
span.nextElementSibling.className = "hide";
}
this.className = "open";
this.nextElementSibling.className="show";
}
}
}
}
</script>
</head>
<body>
<ul class="tree">
<li>
<span class="open" >考勤管理</span>
<ul class="show">
<li>日常考勤</li>
<li>请假申请</li>
<li>加班/出差</li>
</ul>
</li>
<li>
<span class="closed" >信息中心</span>
<ul class="hide">
<li>通知公告</li>
<li>公司新闻</li>
<li>规章制度</li>
</ul>
</li>
<li>
<span class="closed">协同办公</span>
<ul class="hide">
<li>公文流转</li>
<li>文件中心</li>
<li>内部邮件</li>
<li>即时通信</li>
<li>短信提醒</li>
</ul>
</li>
</ul>
</body>
</html>
方法二：
<!DOCTYPE HTML>
<html>
<head>
<title>1. 实现伸缩二级菜单</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 type="text/javascript">
window.onload = function (){
var Allspan = document.getElementsByTagName('span');
for(var i = 0 ; i<Allspan.length; i++){
Allspan[i].onclick=function(){
if(this.className =="open"){
this.className = "closed";
this.nextElementSibling.className="hide";
}else{
var span = document.querySelector("ul.tree span.open");
if(span){
span.className="closed";
span.nextElementSibling.className = "hide";
}
this.className = "open";
this.nextElementSibling.className="show";
}
}
}
}
</script>
</head>
<body>
<ul class="tree">
<li>
<span class="open" >考勤管理</span>
<ul class="show">
<li>日常考勤</li>
<li>请假申请</li>
<li>加班/出差</li>
</ul>
</li>
<li>
<span class="closed" >信息中心</span>
<ul class="hide">
<li>通知公告</li>
<li>公司新闻</li>
<li>规章制度</li>
</ul>
</li>
<li>
<span class="closed">协同办公</span>
<ul class="hide">
<li>公文流转</li>
<li>文件中心</li>
<li>内部邮件</li>
<li>即时通信</li>
<li>短信提醒</li>
</ul>
</li>
</ul>
</body>
</html>
