javaScript小练习之获取事件源对象控制列表显示

最新推荐文章于 2020-09-07 18:38:55 发布

小猴子豆芽菜

最新推荐文章于 2020-09-07 18:38:55 发布

阅读量288

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/XU906722/article/details/79115499

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

要求：

通过点击菜单控制列表是否显示，且每次只能显示一个列表；

显示效果：

<html>
<head>

<script type="text/javascript">
	function list() {
		//获取事件源对象
		var aNode = event.srcElement;
		//获取父节点
		var tdNode = aNode.parentNode;
		//获取div节点
		var divNode = tdNode.getElementsByTagName("div")[0];

		//获取table节点
		var tableNode = document.getElementsByTagName("table")[0];
		//获取所有的div节点
		var divNodes = tableNode.getElementsByTagName("div");

		//控制一次只显示一个列表
		for (var x = 0; x < divNodes.length; x++) {
			//判断当前节点的状态
			if (divNodes[x] == divNode) {
				//控制菜单列表是否显示
				if (divNode.className == "open") {
					divNode.className = "close";
				} else {
					divNode.className = "open";
				}
			}else{
				divNodes[x].className="close";
			}
		}
	}
</script>

<style type="text/css">
table {
	border: blue 1px solid;
}

table td {
	border: blue 1px solid;
	background-color: yellow;
}

table td div {
	background-color: #87CEFA;
	display: none;
}

table td a:link, table td a:visited {
	text-decoration: none;
	color: blue;
}

.open {
	display: block;
}

.close {
	display: none;
}
</style>

</head>

<body>
	<table>
		<tr>
			<td><a href="javascript:void(0)" οnclick="list()">好友菜单列表</a>
				<div>
					张三<br /> 李四<br /> 赵倩<br /> 孙李<br />
				</div></td>
		</tr>
		<tr>
			<td><a href="javascript:void(0)" οnclick="list()">好友菜单列表</a>
				<div>
					张三<br /> 李四<br /> 赵倩<br /> 孙李<br />
				</div></td>
		</tr>
		<tr>
			<td><a href="javascript:void(0)" οnclick="list()">好友菜单列表</a>
				<div>
					张三<br /> 李四<br /> 赵倩<br /> 孙李<br />
				</div></td>
		</tr>

	</table>

</body>

</html>

小猴子豆芽菜

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScript小练习之获取事件源对象控制列表显示

要求：通过点击菜单控制列表是否显示，且每次只能显示一个列表；显示效果： function list() { //获取事件源对象 var aNode = event.srcElement; //获取父节点 var tdNode = aNode.parentNode; //获取div节点 var divNode = tdN
复制链接

扫一扫