（8）布局display应用：好友菜单
在（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)"οnclick="list(this)" > 好友菜单</a>
<ul class="close">
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)"οnclick="list(this)" > 好友菜单</a>
<ul class="close">
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
</ul>
</td>
</tr>
</body>
</html>
