<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>
【javascript】多个列表dl 的开关以及闭合
最新推荐文章于 2020-09-22 16:32:57 发布