层级菜单动态效果的实现

 

【文章标题】层级菜单动态效果的实现

【文章作者】曾健生

【作者邮箱】[email protected]

【作者QQ】190678908

【作者博客】http://blog.csdn.net/newjueqi

【编程环境】Dreamweaver

【作者声明】欢迎转载文章，但转载请保留文章的完整性以及注明文章的出处。

 

*******************************************************************************

在网页上有一个很常见的效果，譬如有如下的菜单项：

       图1：

 

当点击一下“同学好友”后，会出现一个下级菜单项，如图2：

 

       图2

 

从图2可看出，

1.       “同学好友”和“xuelei 风息fengJay 风吹子”是在同一个单元格内（仔细观察红色框线）。

2.       上级菜单“同学好友”和下层菜单“xuelei 风息fengJay 风吹子”作用不同的样式表。

3.       “xuelei 风息fengJay 风吹子”是一个整体的区域。

4.       所有菜单都是在一个表格中。

 

既然“xuelei 风息fengJay 风吹子”是一个整体的区域，那么怎么把这些信息放在一个区域中以便于统一管理呢？很自然地想到了

标签，这是个在网页开发中使用频率非常高的标签。

      

那么是怎么实现上层菜单和下层菜单之间具有不同的样式？答案是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/