要求
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>