javascript获取标签子节点并进行相应设置

最新推荐文章于 2023-01-20 10:00:00 发布

原创最新推荐文章于 2023-01-20 10:00:00 发布 · 4.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#this #js #childNodes #nodeName

HTML+CSS+JS 同时被 2 个专栏收录

6 篇文章

订阅专栏

javaEE学习进阶

6 篇文章

订阅专栏

本文介绍了一种使用JavaScript处理页面中菜单折叠的方法。通过为每个菜单项的li标签添加onclick事件，实现了点击时展开或收起子菜单的功能。该方法简单实用，适用于多种需要处理菜单折叠的场景。

由于经常会遇到对同一个类型的标签的子标签进行相应的处理，例如下图所示情况。

可以使用以下方法，让每一个li标签添加onclick事件，并且将这个标签整体传递给onclick事件的函数。

//获取子节点数组
	var aChild =Obj.childNodes;
	for(var i = 0,len = aChild.length; i < len; i++ ){
		//判断子节点名称，注意大写。
		if(aChild[i].nodeName == 'UL'){
			//获取子节点id
			var ul = document.getElementById(aChild[i].id);
		}

上面菜单的实现办法如下：

<html>	
<head>
<script>
function showTree(Obj){
	//获取子节点数组
	var aChild =Obj.childNodes;
	for(var i = 0,len = aChild.length; i < len; i++ ){
		//判断子节点名称，注意大写。
		if(aChild[i].nodeName == 'UL'){
			//获取子节点id
			var ul = document.getElementById(aChild[i].id);
			if(ul.style.display=="none"){
				ul.style.display="block";	
			}
			else {
				ul.style.display="none";
			}
		}
	}
}		
</script>
</head>
<body>
	<ul>
		<li onclick="showTree(this)">menu1
			<ul id="ul1" style="display:none" >
				<li>item1</li>
				<li>item2</li>
			</ul>
		</li>
		<li onclick="showTree(this)">menu2
			<ul id="ul2" style="display:none" >
				<li>item1</li>
				<li>item2</li>
			</ul>
		</li>
		<li onclick="showTree(this)">menu3
			<ul id="ul3" style="display:none" >
				<li>item1</li>
				<li>item2</li>
			</ul>
		</li>
	</ul>
</body>
</html>