【javascript】多个列表dl 的开关以及闭合-优快云博客

本文链接：https://blog.youkuaiyun.com/jeep_ouc/article/details/17006599

本文介绍了一种使用JavaScript来实现可折叠下拉列表的方法，该方法允许用户点击标题时展开或收起列表项，并且同一时刻只能打开一个列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>