示例-好友菜单

<title>好友菜单</title>
<style type="text/css" >
/*
*对表格中的ul进行样式定义
*1、去除无序列的样式。
*2、将列表的外边距取消。
*/
table ul{
list-style:none;
margin:0px;
background-color:#0F6;
display:none;
border::#ff0000 1px solid;
}

/*
* 对表格框线进行定义。
* 以及单元格的框线进行定义
*/
table{
border:#8080ff 1px solid;
width:120px;
}

table td{
border:#8080ff 1px solid;
background-color:#f3c98f;
padding:0px;
}
/*
*单元格中的超链接样式。
*/
table td a:link,table td a:visited{
color:#1f6df1;
text-decoration:none;
}

table td a:hover{
color:#df4011;
}
/*预定一些样式*/
.open{
display:block;
}
.close{
display:none;
}

</style>
</head>

<body>
<!--完成一个好有菜
单，展开闭合效果,
而且要求一个开而关其他-->
<script type="text/javascript">
function list(node){
//获取被操作的节点ul。
/*
*先通过事件源超链接标签获取其父节点td，然后再通过父节点获取ul节点。
*/
var oTdNode = node.parentNode;
var oUlNode = oTdNode.getElementsByTagName("ul")[0];

//获取表格中所有的ul
//先获取表格节点对象。
var oTabNode = document.getElementById("goodlist");
var collUlNodes = oTabNode.getElementsByTagName("ul");


for(var x=0; x<collUlNodes.length;x++){

if(collUlNodes[x]==oUlNode){
if(oUlNode.className == "open"){
oUlNode.className ="close";
}else{
oUlNode.className = "open";
}
}
else{
collUlNodes[x].className = "close";
}
}
}

</script>
<table id="goodlist">
<tr>
<td>
<a href="javascrip:tvoid(0)" onclick="list(this)">好友菜单</a>
<ul>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="list(this)">好友菜单</a>
<ul>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="list(this)">好友菜单</a>
<ul>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="list(this)">好友菜单</a>
<ul>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
</ul>
</td>
</tr>
</table>
</body>

posted @ 2014-06-10 23:23  是但哥  阅读(196)  评论(0)    收藏  举报