DOM（二）-03-DOM(示例-展开闭合列表)_js 多个相同dom使用按钮控制每个dom内容展开收起-CSDN博客

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

<!--
DOM示例-展开闭合列表

这个也是网页中常用的功能演示，其中需要用到CSS技术、DOM技术等

希望实际效果是，单击“显示条目一”就能出现下拉菜单
-->

<!--
思路：
1.标签封装数据，用html
2.定义样式，用css
3.明确事件源，事件，以及要处理的节点，用dom
4.明确具体操作方式，其实就是事件的处理内容
 -->

<html>
	<head>
	
		<!-- 以下对应思路2：用css定义样式 -->
		<style type="text/css">
			dl dd{/*关联选择器*/
				margin:0px;/*将<dd>标签距离左边的外边距设置为0，即左边顶格显示*/
			}
			
		/*
		希望将“展开列表内容”隐藏：
		打开CSS API文档，找到布局中的overflow：检索或这是当对象的内容超过其指定高度及宽度时如何管理内容。
		
		1.overflow语法：
		overflow:visible | auto | hidden | scroll
		
		2.overflow取值：
		(1)visible：默认值，不剪切内容也不添加滚动条，假如显式声明此默认值，对象将包含对象的window或frame的尺寸裁切，
		并且clip属性设置将失效；
		
		(2)auto：在必须时对象内容才会被裁切或显示滚动条；
		
		(3)hidden：不现实超过对象尺寸的内容；
		
		(4)scroll：总是显示滚动条。
		
		【总之】本身有个高度指定，即默认就这么高，如果内容超过这个高度，用overflow进行管理，可选的有：
		(1)overflow(2)auto(3)hidden(4)scroll
		*/
		
		dl{
			height:16px;
			overflow:hidden;
			/*
			 *这里先指定dl标签封装区域的高度为16px，因为网页正常字体大小就是16px，然后再设置布局overflow:hidden，
			 *所以超过16px的内容全部被隐藏。（如果将高度设置为8px，那么第一行“显示条目一”只显示一半）
			 */
		}
		
		</style>
	</head>
	<body>
		<script type="text/javascript">
		
		var flag = true;//定义标记，为了下面的ifelse
		
		function list(){//单击一次“显示条目一”，调用一次该方法，判断一次标记
			
			/*思考：如何在单击"显示条目"后出现"展开列表内容"呢？很简单，只要将css样式中的overflow由hidden改为visible即可*/
			/*
			 *思路：
			 *1.无非就是将dl属性的overflow属性的值改为visible即可。
			 *2.要先获取dl节点。
			 *3.改变该节点的style中的overflow的属性。
			 */
			
			var oDlNode = document.getElementsByTagName("dl")[0];//注意这里拿到的是数组，所以需要[0]
			
			
			if(flag){
				oDlNode.style.overflow = "visible";
				flag = false;
			}else{
				oDlNode.style.overflow = "hidden";
				flag = true;
			}/*这个ifelse是为了实现鼠标不停单击“显示条目一”会来回“展开”和“收起”剩余条目*/
		}
		
		</script>
		
		<!-- 以下对应思路1：用html标签封装数据 -->
		
		<dl>
		<dt οnclick="list()">显示条目一</dt>	<!-- 对应思路3：明确事件源，即<dt>，所以在其中添加onclick -->
		<dd>展开列表内容</dd>
		<dd>展开列表内容</dd>
		<dd>展开列表内容</dd>
		<dd>展开列表内容</dd>
		</dl>
		
	</body>
</html>