DOM（二）-05-(示例-展开闭合列表3)

来源：互联网发布：wkwebview 加载本地js 编辑：程序博客网时间：2024/06/05 05:08
<!--新需求：在多个列表下，一次只能展开一个，当展开另一个时候，前一个被自动关闭（如先展开列表一，立马点开列表二，此时列表一被自动关闭）--><!--思路：1.获取所有dl节点2.遍历这些节点，只对当前的dl进行展开或闭合操作，其他节点都进行闭合操作。--><html><head><style type="text/css">dl dd{margin:0px;}dl{height:16px;}.open{overflow:visible;}.close{overflow:hidden;}dl dt{color:#FF8000;}</style></head><body><script type="text/javascript">function list(node){//1.获取当前被点击的dl节点var oDlNode = node.parentNode;//2.获取所有dl节点var collDlNodes = document.getElementsByTagName("dl");//collDlNodes中的coll表示返回的是集合//3.遍历所有dl节点for(var x=0;x<collDlNodes.length;x++){if(collDlNodes[x] == oDlNode){if(oDlNode.className == "close")oDlNode.className ="open";elseoDlNode.className ="close";}else{collDlNodes[x].className = "close";}}}</script><dl class="close"><dt onclick="list(this)">显示条目一</dt><dd>展开列表内容1</dd><dd>展开列表内容1</dd><dd>展开列表内容1</dd><dd>展开列表内容1</dd></dl><dl class="close"><dt onclick="list(this)">显示条目二</dt><dd>展开列表内容2</dd><dd>展开列表内容2</dd><dd>展开列表内容2</dd><dd>展开列表内容2</dd></dl><dl class="close"><dt onclick="list(this)">显示条目三</dt><dd>展开列表内容3</dd><dd>展开列表内容3</dd><dd>展开列表内容3</dd><dd>展开列表内容3</dd></dl></body></html>
0 0