三级菜单

来源：互联网发布：java 类型擦除编辑：程序博客网时间：2024/05/17 00:52

<!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 onclick="show_span(this)"> 苹果</li>
 苹果1 
 苹果2
 <li onclick="show_span(this)">李子</li>
 李子1 
 李子2
 
 李子3
 <li onclick="show_span(this)">香蕉</li>
 香蕉1 
 香蕉2 
 香蕉3 
 香蕉4
 <li onclick="show_span(this)">石榴</li>
 石榴1 
 石榴2
</ul>
<ul onClick="show_ul(this);">
 工作
 <li onclick="show_span(this)">软件开发</li>
 软件开发1 
 软件开发2
 <li onclick="show_span(this)">计算机管理</li>
 计算机管理1 
 计算机管理2
 <li onclick="show_span(this)" >硬件基础</li>
 硬件基础1 
 硬件基础2 
 硬件基础3
 </ul>
</body>
</html>