DOM14---好友列表显示

最新推荐文章于 2022-08-26 09:46:02 发布

onyas

最新推荐文章于 2022-08-26 09:46:02 发布

阅读量847

点赞数

分类专栏： DOM 文章标签： DOM14 好友列表显示 javascript

本文链接：https://blog.csdn.net/zheng0518/article/details/8998757

版权

DOM 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

如图所示

代码如下：

<html>
	<head>
		<title></title>
		<style type="text/css">
			/*将表格中的ul进行样式定下，去除无序列表的样式，将列表外边距取消       padding:0px;//firefox中应用*/
			table ul{
				list-style:none;
				margin:0px;
				background-color:#26e356;
				display:none;
				padding:0px;//firefox中应用
			}
			/*对表格框线进行定义，以及单元格的框线进行定义*/
			table{
				border:#8080ff 1px solid;
				width:80px;
			}
			table td{
				border:#8080ff 1px solid;
				background-color:#f3c98f;
			}
			/*单元格中的超链接样式*/
			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，先获取父节点，然后获取ul节点
				var oTdNode = node.parentNode;
				var oUlNode = oTdNode.getElementsByTagName("ul")[0];
				//获取表格中所有ul节点，先获取表格节点对象
				var oFriends = document.getElementById("friendsList");
				var collUlNodes = oFriends.getElementsByTagName("ul");
				for(var i=0;i<collUlNodes.length;i++)
				{
					if(collUlNodes[i]==oUlNode)
					{
						//第一次的时候className为空
						if(oUlNode.className=="open")
						{
							oUlNode.className="close";
						}else
						{
							oUlNode.className="open";
						}
					}else
					{
						collUlNodes[i].className="close";
					}
				}
				
			}
		</script>
	<!--
		完成一个好友列表，展开闭合效果。
	-->
	<table id="friendsList">
		<tr>
			<td>
				<a href="javascript:void(0)" οnclick="list(this)">好友菜单</a>
				<ul>
					<li>张三</li>
					<li>李四</li>
					<li>王五</li>
					<li>小六</li>
				</ul>
			</td>
		</tr>
		<tr>
			<td>
				<a href="javascript:void(0)" οnclick="list(this)">好友菜单</a>
				<ul>
					<li>张三</li>
					<li>李四</li>
					<li>王五</li>
					<li>小六</li>
				</ul>
			</td>
		</tr>
		<tr>
			<td>
				<a href="javascript:void(0)" οnclick="list(this)">好友菜单</a>
				<ul>
					<li>张三</li>
					<li>李四</li>
					<li>王五</li>
					<li>小六</li>
				</ul>
			</td>
		</tr>
		<tr>
			<td>
				<a href="javascript:void(0)" οnclick="list(this)">好友菜单</a>
				<ul>
					<li>张三</li>
					<li>李四</li>
					<li>王五</li>
					<li>小六</li>
				</ul>
			</td>
		</tr>
		<tr>
			<td>
				<a href="javascript:void(0)" οnclick="list(this)">好友菜单</a>
				<ul>
					<li>张三</li>
					<li>李四</li>
					<li>王五</li>
					<li>小六</li>
				</ul>
			</td>
		</tr>
	</table>
	</body>
</html>