javascript下拉列表菜单的实现方法

之前写过这个《javascript下拉列表中显示树形菜单的实现方法》菜单的体现，但是在写了之后就发现了，不太适合，高度要精准控制，并且还不是很好看。现在采用table来封装，我们知道table的每一行写满了之后，下一行会自动加，这个比之前我们自己制定高度好很多。
1、点击之后都可以并存的情况（只需函数写法不一样就可）
dispaly也是自己设置的，通过父节点来操作子节点，显示与否；

2、点击之后只允许打开一个，其余的都要关掉

 css样式的编写：

 
  ul{ 
   list-style:none; 
   margin:0px; 
   padding:0px; 
  } 
  table{ 
   border:#00ff40 solid 1px; 
  } 
  table a{ 
   text-decoration:none; 
  } 
  table tr td ul{ 
   display:none; 
  } 
  .open2{ 
   display:block; 
   background:#8080ff; 
  } 
  .close2{ 
   display:none; 
  } 

效果图（只能开一个的）：

完整代码：

 
 
  
  
  
  ul{ 
   list-style:none; 
   margin:0px; 
   padding:0px; 
  } 
  table{ 
   border:#00ff40 solid 1px; 
  } 
  table a{ 
   text-decoration:none; 
  } 
  table tr td ul{ 
   display:none; 
  } 
  .open2{ 
   display:block; 
   background:#8080ff; 
  } 
  .close2{ 
   display:none; 
  } 
  
  
    
  
  
  
 
  
 
 
  
 
   
 
     
    同事栏 
    
 
     
同事1
 
     
同事2
 
     
同事3
 
     
同事4
 
    
 
     
   
 
  
 
  
 
   
 
     
    同学栏 
    
 
     
同学1
 
     
同学2
 
     
同学3
 
     
同学4
 
    
 
   
 
  
 
  
 
   
 
     
    黑名单栏 
    
 
     
黑名单同学1
 
     
黑名单同学2
 
     
黑名单同学3
 
     
黑名单同学4
 
    
 
   
 
  
 
  
 
 
  
 

相信大家通过这两篇文章的介绍应该有了大概的思路，小编的这篇文章有些制作的效果略微简陋，大家可以再进一步的完善。