DOM11---展开闭合列表01

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

onyas

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

阅读量999

点赞数

分类专栏： DOM 文章标签： DOM 展开闭合列表01

本文链接：https://blog.csdn.net/zheng0518/article/details/8998183

版权

DOM 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

只有一个展开列表的情况

<html>
	<head>
		<title></title>
		<style type="text/css">
			/*把dd中的缩近取消为0*/
			dl dd{
				margin:0px;
			}
			dl{
				height:16px;
				overflow:hidden;
			}
		</style>
	</head>
	<body>
		<!--
			思路：
				1、标签封装数据，html
				2、定义样式css
				3、明确事件源，事件，以及要处理的节点.dom
				4、明确具体的操作方式，其实就是事件的处理内容。js
		-->
		<script type="text/javascript">
			//列表展开闭合效果
			var flag = true;
			function list()
			{
				/*
					无非就是 dl的overflow的值在hidden与visible中切换
				*/
				var olistDt = document.getElementsByTagName("dl")[0];
				if(flag)
				{
					olistDt.style.overflow = "visible";
					flag = false;
				}else
				{
					olistDt.style.overflow = "hidden";
					flag = true;
				}
			}
		</script>
		<dl>
			<dt id="listDt" οnclick="list()">显示条目一</dt>
			<dd>展开列表内容</dd>
			<dd>展开列表内容</dd>
			<dd>展开列表内容</dd>
			<dd>展开列表内容</dd>
		</dl>
	</body>
</html>