Javascript通过overflow控制列表闭合与展开的方法

本文实例讲述了Javascript通过overflow控制列表闭合与展开的方法。分享给大家供大家参考。具体实现方法如下：

div dl
{
  margin:0;
  padding:0;
  font-size:14px;
}
#divMain
{
  width:500px;
  background-color:#22477A;
  margin:0 auto;
  margin-top:30px;
}
dl
{
  width:200px;
  background:#A6BCE5;
  height:14px; 
  overflow:hidden; 
}
dt
{
  cursor:pointer; 
  font-weight:bold;
  color:Green;
}
.open
{
  height:112px;
  overflow:visible;
}
.close
{
  height:14px; 
  overflow:hidden;
}






  

    球星列表1
  
  
罗纳尔多
  
贝克汉姆
  
齐达内
  
内马尔
  
巴蒂斯图塔
  
梅西




  

    球星列表2
  
  
罗纳尔多
  
贝克汉姆
  
齐达内
  
内马尔
  
巴蒂斯图塔
  
梅西




  

    球星列表3
  
  
罗纳尔多
  
贝克汉姆
  
齐达内
  
内马尔
  
巴蒂斯图塔
  
梅西




  

    球星列表4
  
  
罗纳尔多
  
贝克汉姆
  
齐达内
  
内马尔
  
巴蒂斯图塔
  
梅西




  

    球星列表5
  
  
罗纳尔多
  
贝克汉姆
  
齐达内
  
内马尔
  
巴蒂斯图塔
  
梅西




  

    球星列表6
  
  
罗纳尔多
  
贝克汉姆
  
齐达内
  
内马尔
  
巴蒂斯图塔
  
梅西

希望本文所述对大家的javascript程序设计有所帮助。