【文章标题】层级菜单动态效果的实现
【文章作者】曾健生
【作者邮箱】zengjiansheng1@126.com
【作者QQ】190678908
【作者博客】http://blog.csdn.net/newjueqi
【编程环境】Dreamweaver
【作者声明】欢迎转载文章，但转载请保留文章的完整性以及注明文章的出处。
*******************************************************************************
在网页上有一个很常见的效果，譬如有如下的菜单项：
图1：
当点击一下“同学好友”后，会出现一个下级菜单项，如图2：
图2
从图2可看出，
1. “同学好友”和“xuelei 风息fengJay 风吹子”是在同一个单元格内（仔细观察红色框线）。
2. 上级菜单“同学好友”和下层菜单“xuelei 风息fengJay 风吹子”作用不同的样式表。
3. “xuelei 风息fengJay 风吹子”是一个整体的区域。
4. 所有菜单都是在一个表格中。
既然“xuelei 风息fengJay 风吹子”是一个整体的区域，那么怎么把这些信息放在一个区域中以便于统一管理呢？很自然地想到了<div>标签，这是个在网页开发中使用频率非常高的标签。
那么是怎么实现上层菜单和下层菜单之间具有不同的样式？答案是CSS。CSS的名称是层叠样式表，既然是层叠，就是能被覆盖的，我们只要整个单元格作用一个样式表，在DIV区域作用一个不同的样式表，就能有不同的显示效果。
虽然在第一个单元格中，“同学好友”是固定显示信息，“xuelei 风息fengJay 风吹子”是动态显示信息，但我们必须明确：“xuelei 风息fengJay 风吹子”信息平时只是隐藏，当点击了一下“同学好友”后就显示出来。信息显示的隐藏，应该是属于CSS中布局方面的，查看CSS帮助文档，果然查到了一个属性display，其中有两个取值：
1. block：块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行
2. none：隐藏对象。与 visibility 属性的hidden值不同，其不为被隐藏的对象保留其物理空间
注意看取值none，“是不为被隐藏的对象保留其物理空间“，也就是连所在区域也不显示，这不就是我们所需要的隐藏效果吗？
一般来讲，这种菜单的展现效果都是单个的。譬如当展开“Java好友”菜单，如果“同学好友”菜单以前是展开的话就会自动闭合，所以各个菜单项之间是互斥关系。同时如果“同学好友”菜单以前是展开的话，在重新点击一下“同学好友”菜单下面的子菜单就会自动闭合。
在表格中有如下层次关系：
Table
|--Tbody
|--tr(第1行)
|--td：
|--超链接A：“同学好友”
|--div区域：“xuelei 风息fengJay 风吹子”
|--tr(第2行)
|--td：
|--超链接A：“JAVA好友”
|--div区域：“lian guoxing 欣”
|--tr(第3行)
|--td：
|--超链接A：“C++好友”
|--div区域：“安吹kanxue 是人”
既然是互斥关系，必须要获取当前的div对象和表格中所有的div对象。
1. 获取当前的div对象：当点击超链接对象时可通过“超链接对象。parentNode“获取所在的单元格对象，通过单元格的getElementsByTagName来获取div对象。
2. 获取表格中所有的div对象：
a， 通过document.getElementsByTagName( "table" )[0]获取当前的表格对象
b， 通过tabObj.getElementsByTagName("div")就能获取一个表格内所有的div对象
遍历表格内所有的div对象，当检测到的div对象为当前div对象而且状态为隐藏，那当前div对象状态变为显示，其他的div对象变为隐藏；当检测到的div为当前div对象而且状态为显示，那当前div对象状态变为隐藏。CSS样式表的选择器中有个class选择器，可把一个CSS作用于具有相同类名的元素，我们可以把div的显示设置为一种样式作用于类名open，div的隐藏设置为另外一种样式作用于类名close，用DOM为div分别改类名，就能实现互斥显示效果。
显示和隐藏的CSS样式表如下：
.open{ display:block
}
.close{
display:none;
}
最后实现的代码如下：
//aObj为当前超链接对象
function list( aObj )
{
//根据A对象获取所在单元格对象
tdObj=aObj.parentNode;
//根据单元格对象获取本单元格的div对象
divObj=tdObj.getElementsByTagName("div")[0];
//获取表格对象
tabObj=document.getElementsByTagName( "table" )[0];
//获取表格对象内所有的div对象
divArray=tabObj.getElementsByTagName("div");
//遍历所有的div对象
for( var x in divArray )
{
//遍历到的div对象为当前div对象
if( divObj==divArray[x] )
{
/*当检测到的div为当前div对象而且状态为隐藏，那当前div对象状态变为显示，其他的div对象变为隐藏；当检测到的div为当前div对象而且状态为显示，那当前div对象状态变为隐藏*/
if( divArray[x].className== "open" )
{
divArray[x].className= "close";
}
else
{
divArray[x].className= "open";
}
}
else //把其他的div对象变为隐藏
{
divArray[x].className= "close";
}
}
}
文章附件下载：http://newjueqi.ys168.com/