DOM（二）-05-(示例-展开闭合列表3)

最新推荐文章于 2019-08-31 15:01:11 发布

wy_0928

最新推荐文章于 2019-08-31 15:01:11 发布

阅读量369

点赞数

分类专栏： No.7-JavaWeb自学笔记（五）——DOM

本文链接：https://blog.csdn.net/wy_0928/article/details/47810489

版权

No.7-JavaWeb自学笔记（五）——DOM 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

<!--
新需求：在多个列表下，一次只能展开一个，当展开另一个时候，前一个被自动关闭
（如先展开列表一，立马点开列表二，此时列表一被自动关闭）
-->

<!--
思路：
1.获取所有dl节点
2.遍历这些节点，只对当前的dl进行展开或闭合操作，其他节点都进行闭合操作。
-->


<html>
	<head>
		<style type="text/css">
		dl dd{
			margin:0px;
		}
		dl{
			height:16px;
		}
		.open{
			overflow:visible;
		}
		.close{
			overflow:hidden;
		}
		dl dt{
			color:#FF8000;
		}
		</style>
	</head>
	<body>
		<script type="text/javascript">
		
			function list(node){
				
				//1.获取当前被点击的dl节点
				var oDlNode = node.parentNode;
				
				//2.获取所有dl节点
				var collDlNodes = document.getElementsByTagName("dl");//collDlNodes中的coll表示返回的是集合
				
				//3.遍历所有dl节点
				for(var x=0;x<collDlNodes.length;x++){
					
					if(collDlNodes[x] == oDlNode){
						
						if(oDlNode.className == "close")
							oDlNode.className ="open";
						else
							oDlNode.className ="close";
						
					}else{
						
						collDlNodes[x].className = "close";
						
					}
					
				}
				
			}
		
		</script>
		
		<dl class="close">
		<dt οnclick="list(this)">显示条目一</dt>
		<dd>展开列表内容1</dd>
		<dd>展开列表内容1</dd>
		<dd>展开列表内容1</dd>
		<dd>展开列表内容1</dd>
		</dl>
		<dl class="close">
		<dt οnclick="list(this)">显示条目二</dt>
		<dd>展开列表内容2</dd>
		<dd>展开列表内容2</dd>
		<dd>展开列表内容2</dd>
		<dd>展开列表内容2</dd>
		</dl>
		<dl class="close">
		<dt οnclick="list(this)">显示条目三</dt>
		<dd>展开列表内容3</dd>
		<dd>展开列表内容3</dd>
		<dd>展开列表内容3</dd>
		<dd>展开列表内容3</dd>
		</dl>
	</body>
</html>

wy_0928

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM（二）-05-(示例-展开闭合列表3)

 dl dd{ margin:0px; } dl{ height:16px;
复制链接

扫一扫