在（7）中overflow布局：可以选择隐藏数据，但是当一个条目打开后，并不能将之后的条目自动在此条目内容的下面，而且可能导致覆盖条目的问题，因为该问题的存在，所以可以用display实现条目的打开时的自动伸缩
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> /*对表格中的ul进行样式定义1，取出无序列表的样式（无序列表自带样式缩进或者文字前的圆圈）2，去掉外边距*/ table tr td ul { list-style:none; margin:0px; background-color:#F0F; display:none;/*此元素不会显示*/ border:#FC3 1px solid; padding:0px; } /*对表格框线进行定义以及单元格的框线进行定义*/ table { border:#0FC 1px solid; width:80px; } table td { border:#000 1px solid; background-color:#9F3; padding:0px; } table tr td a { color:#600; text-decoration:none;/*去掉下划线*/ } table tr td a:hover { color:#CFF; } table tr td a:link,table tr td a:visited { color:#F00; text-decoration:none; } .open { display:block;/*块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行*/ } .close { display:none;/*隐藏对象。与 visibility 属性的hidden值不同，其不为被隐藏的对象保留其物理空间*/ } </style> </head> <body> <script type="text/javascript"> //事件源：超链接 处理对象：ul 处理方式：open，close function list(aNode) { //根据事件源a获取其下一个兄弟ul var ulNode=aNode.nextSibling.nextSibling; //alert(ulNode.nodeName); //遍历所有的ul节点，要通过table var tabNode=document.getElementById("goodlist"); //alert(tabNode.nodeName); var collUlNodes=tabNode.getElementsByTagName("ul")//容器型标签,都含有根据标签名获取节点的方法 for(var x=0;x<collUlNodes.length;x++) { if(collUlNodes[x]==ulNode) { if(ulNode.className=="open") { ulNode.className="close"; } else { ulNode.className="open"; } } else { collUlNodes[x].className="close"; } } } </script> <table id="goodlist"> <tr> <td> <a href="javascript:void(0)" onclick="list(this)"> 好友菜单</a> <ul class="close"> <li>一个好友</li> <li>一个好友</li> <li>一个好友</li> <li>一个好友</li> </ul> </td> </tr> <tr> <td> <a href="javascript:void(0)"onclick="list(this)" > 好友菜单</a> <ul class="close"> <li>一个好友</li> <li>一个好友</li> <li>一个好友</li> <li>一个好友</li> </ul> </td> </tr> <tr> <td> <a href="javascript:void(0)"onclick="list(this)" > 好友菜单</a> <ul class="close"> <li>一个好友</li> <li>一个好友</li> <li>一个好友</li> <li>一个好友</li> </ul> </td> </tr> </body> </html>