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

来源：互联网发布：sql查询字段包含数字编辑：程序博客网时间：2024/05/17 08:23

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