您的位置：首页 > Web前端 > JavaScript

后台伸缩二级菜单

2017-02-20 14:38 435 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 伸缩菜单手风琴二级菜单 js 隐藏显示

相关文章推荐

新的分享

章节导航