<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三级菜单</title>
<style type="text/css">
ul li
{
display:none;
color: #0000FF;
}
span
{
display:none;
color: #9933FF;
}
</style>
<script language="javascript">
function show_ul(ul)
{
var a= document.getElementsByTagName("li");//得到所有的 li 对象
for (i=0;i<a.length ;i++ )//a.length 表示所有的 li 的个数,通过for来实现是否显示该li
{
a[i].style.display="none";//全部为 none
}
var lis= ul.getElementsByTagName("li");//得到点击的 ul 下的 li 对象
var len = lis.length;//得到点击的 ul 下的 li 的长度
for(var i=0;i<len;i++)
{
if(lis[i].style.display == "none")//如果 li 隐藏
{
//alert(lis[i]);// 该 ul 下的所有 li 对象
lis[i].style.display = "block";//则显示该 ul 下的所有 li
}
else
{
lis[i].style.display = "none";//否则隐藏 li
}
}
}
function show_span(span)
{
var a= document.getElementsByTagName("span");//得到所有的 span 对象
for (i=0;i<a.length ;i++ )
{
a[i].style.display="none";//全部为 none
}
var lis=span.getElementsByTagName("span");//得到点击的 li 下的 span 对象
var len = lis.length;//得到点击的 li 下的 span 的长度
for(var i=0;i<len;i++)
{
if(lis[i].style.display == "none")
{
lis[i].style.display = "block";//则显示该 li 下的所有 span
}
else
{
lis[i].style.display = "none";
}
}
}
</script>
</head>
<body>
<ul onClick="show_ul(this)">水果
<li οnclick="show_span(this)"> 苹果</li>
<span>苹果1</span><br />
<span>苹果2</span>
<li οnclick="show_span(this)">李子</li>
<span>李子1</span><br />
<span>李子2</span>
<br />
<span>李子3</span>
<li οnclick="show_span(this)">香蕉</li>
<span>香蕉1</span><br />
<span>香蕉2</span><br />
<span>香蕉3</span><br />
<span>香蕉4</span>
<li οnclick="show_span(this)">石榴</li>
<span>石榴1</span><br />
<span>石榴2</span>
</ul>
<ul onClick="show_ul(this);">
工作
<li οnclick="show_span(this)">软件开发</li>
<span>软件开发1</span><br />
<span>软件开发2</span>
<li οnclick="show_span(this)">计算机管理</li>
<span>计算机管理1</span><br />
<span>计算机管理2</span>
<li οnclick="show_span(this)" >硬件基础</li>
<span>硬件基础1</span><br />
<span>硬件基础2</span><br />
<span>硬件基础3</span>
</ul>
</body>
</html>