html：
<span style="font-size:18px;"><!DOCTYPE HTML>
<html>
<head>
<title>1. 实现伸缩二级菜单</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/7_1.css" />
<script src="js/7_1.js"></script>
</head>
<body>
<ul class="tree">
<li>
<span class="open" οnclick="toggle(this)">考勤管理</span>
<ul class="show">
<li>日常考勤</li>
<li>请假申请</li>
<li>加班/出差</li>
</ul>
</li>
<li><span class="closed" οnclick="toggle(this)">信息中心</span>
<ul class="hide">
<li>通知公告</li>
<li>公司新闻</li>
<li>规章制度</li>
</ul>
</li>
<li><span class="closed" οnclick="toggle(this)">协同办公</span>
<ul class="hide">
<li>公文流转</li>
<li>文件中心</li>
<li>内部邮件</li>
<li>即时通信</li>
<li>短信提醒</li>
</ul>
</li>
</ul>
</body>
</html>
</span>
js:
<span style="font-size:18px;">function toggle(span){
//如果span的className是open
if(span.className=="open"){
//就找到class为show的ul。修改其className为hide
span.nextElementSibling.className="hide";
//将span的className改为closed
span.className=="close";
//否则
}else{
//查找class为open的span,保存在变量openSpan中
var openSpan=docuemnt.querySelector("span.open");
//如果openSpan不等于null
if(openSpan!=null){
//找到class为show的ul,设置其className为hide
document.querySelector("ul.show").className="hide";
//将openSpan的className设置为closed
openSpan.className="close";
}
//设置span的className为open
span.className="open";
//找到class为open的span旁边的兄弟ul，设置其className为show
span.nextElementSibling.className="show";
}
}</span>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
