思路：
1、创建HTML标签
2、创建css样式
3、编写js代码获取dl节点对象
4、封装css样式
5、通过改变className属性改变css样式
<html> <head> <style type="text/css"> #div_1{ height:32px; background-color:#000000; color:#ccff00; } dl dd{ margin:0px; padding:0px; } dl{ height:24px; } .close{ overflow:hidden; } .open{ overflow:visible; } </style> </head> <body> <div id="div_1"> <dl id="list_dl" class="close"> <dt onmousemove="list_on(this)" onmouseout="list_out(this)" >NBA全明星</dt> <dd><a href="javascript:void(0);" >詹姆斯</a></dd> <dd>哈登</dd> <dd>韦德</dd> </dl> <dl id="list_dl" class="close"> <dt onmousemove="list_on(this)" onmouseout="list_out(this)" >NBA全明星</dt> <dd>詹姆斯</dd> <dd>哈登</dd> <dd>韦德</dd> </dl> <dl id="list_dl" class="close"> <dt onmousemove="list_on(this)" onmouseout="list_out(this)" >NBA全明星</dt> <dd>詹姆斯</dd> <dd>哈登</dd> <dd>韦德</dd> </dl> </div> </body> <script type="text/javascript"> function list_on(node){ var odlNode=node.parentNode; odlNode.className="open"; } function list_out(node){ var odlNode=node.parentNode; odlNode.className="close"; } </script> </html>
<html> <head> <style type="text/css"> dl dd{ margin:0px; } dl{ height:16px; } .close{ overflow:hidden; } .open{ overflow:visible; } </style> </head> <body> <dl id="list_dl" class="close"> <dt onclick="list()" >NBA全明星</dt> <dd>詹姆斯</dd> <dd>哈登</dd> <dd>韦德</dd> </dl> </body> <script type="text/javascript"> function list(){ var odtNode=document.getElementById("list_dl"); if(odtNode.className=="close"){ odtNode.className="open"; }else{ odtNode.className="close"; } } </script> </html>