DOM12---展开闭合列表02

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

onyas

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

阅读量1.9k

点赞数

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

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

版权

DOM 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

多个列表进行展开闭合，并且js,与css分离

<html>
	<head>
		<title></title>
		<style type="text/css">
			/*把dd中的缩近取消为0*/
			dl dd{
				margin:0px;
			}
			dl{
				height:16px;
			}
			/*预定义一些样式，类选择器，便于动态加载*/
			.open{
				overflow:visible;
			}
			.close{
				overflow:hidden;
			}
		</style>
	</head>
	<body>
		<script type="text/javascript">
			//重新定义list,降低js,css之间的耦合性
			function list(node)
			{
				 //var olistDt = document.getElementsByTagName("dl")[0];
				 var olistDt = node.parentNode; 
				 if(olistDt.className=="close")
				{
					olistDt.className = "open";
				}else
				{
					olistDt.className = "close";
				}
			}
		</script>
		<dl class="close">
			<dt id="listDt" οnclick="list(this)">显示条目一</dt>
			<dd>展开列表内容1</dd>
			<dd>展开列表内容1</dd>
			<dd>展开列表内容1</dd>
			<dd>展开列表内容1</dd>
		</dl>
		<dl class="close">
			<dt id="listDt" οnclick="list(this)">显示条目二</dt>
			<dd>展开列表内容2</dd>
			<dd>展开列表内容2</dd>
			<dd>展开列表内容2</dd>
			<dd>展开列表内容2</dd>
		</dl>
		<dl class="close">
			<dt id="listDt" οnclick="list(this)">显示条目三</dt>
			<dd>展开列表内容3</dd>
			<dd>展开列表内容3</dd>
			<dd>展开列表内容3</dd>
			<dd>展开列表内容3</dd>
		</dl>
	</body>
</html>

onyas

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
DOM12---展开闭合列表02

多个列表进行展开闭合，并且js,与css分离 /*把dd中的缩近取消为0*/ dl dd{ margin:0px; } dl{ height:16px; } /*预定义一些样式，类选择器，便于动态加载*/ .open{ overflow:visible; } .close{ ove
复制链接

扫一扫