【javascript】多个列表dl 的开关以及闭合

最新推荐文章于 2020-09-22 16:32:57 发布

Jeep_Dom

最新推荐文章于 2020-09-22 16:32:57 发布

阅读量1.3k

点赞数

分类专栏： Javascript 文章标签： javascript overflow dl

本文链接：https://blog.csdn.net/jeep_ouc/article/details/17006599

版权

Javascript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<script type="text/javascript">
	function list(dtNode){
		/* var dtNode = event.srcElement; //基于事件源驱动
		var dlNode = dtNode.parentNode; */
		var dlNode = dtNode.parentNode; // 事件源对象通过this传入
		if(dlNode.className=="open"){
			dlNode.className = "close";
		}else{
			dlNode.className = "open";
		}
	}	
	//只开一个列表
	function onelist(dtNode){
		var dlNode = dtNode.parentNode;
		var dlNodes = document.getElementsByTagName("dl");
		for(var x=0;x<dlNodes.length;x++){
			if(dlNodes[x] == dlNode){
				if(dlNode.className=="open"){
					dlNode.className = "close";
				}else{
					dlNode.className = "open";
				}
			}
			else{
				dlNodes[x].className = "close";
			}
		}
	}
</script>

<style type="text/css">   /*样式选择器*/
	.open{height:auto; overflow:visible;}  /*height：auto 控制列表高度自适应，不然多个列表间有重合*/
	.close{ overflow:hidden;}
	dl{ height:16px;overflow:hidden; }   //字体默认高度 16px;
</style>
</head>
<body>
	<dl>
		<dt onclick ="onelist(this)">湖南</dt>
		<dd>长沙</dd>
		<dd>郴州</dd>
		<dd>岳阳</dd>
	</dl>
	<dl>
		<dt onclick ="onelist(this)">广东</dt>
		<dd>广州</dd>
		<dd>深圳</dd>
	</dl>
</body>

Jeep_Dom

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【javascript】多个列表dl 的开关以及闭合

function list(dtNode){ /* var dtNode = event.srcElement; //基于事件源驱动 var dlNode = dtNode.parentNode; */ var dlNode = dtNode.parentNode; // 事件源对象通过this传入 if(dlNode.className=="open"){ dlNode.c
复制链接

扫一扫

专栏目录