jQuery 子节点的隐藏与展示

最新推荐文章于 2023-10-03 23:23:09 发布

SeaWolf-S

最新推荐文章于 2023-10-03 23:23:09 发布

阅读量1.3k

点赞数

分类专栏： jQuery 文章标签： jQuery display

本文链接：https://blog.csdn.net/xlkyujhc/article/details/102508074

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

jQuery 子节点的隐藏与展示,单击父节点，如果子节点隐藏，则展示；如果子节点展示，则隐藏。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			ul{
				list-style: none;
			}
		</style>
		<script src="jquery-3.4.1.js"></script>
		<script>
			function test(){
				var children=$(this).next();
				var displayValue=$(children[0]).css("display");
				if(displayValue=='none'){
					children.show();
				}else{
					children.hide();
				}
			}
			
			$(function(){
				$("ul > li > span").click(test);
			});
		</script>
	</head>
	<body>
		<ul>
			<li>
				<span>父节点1</span>
				<ul>
					<li>子节点1</li>
					<li>子节点2</li>				
				</ul>
			</li>
			<li>
				<span>父节点2</span>
				<ul>
					<li>子节点1</li>
					<li>子节点2</li>				
				</ul>
			</li>
			
		</ul>
	</body>
</html>