一个列表展开的问题

冯海霞

<p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a >http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a >http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title></p><p><style type="text/css"></p><p>.open{
overflow:visible;
}
.close{
overflow:hidden;
}
dl{
overflow:hidden;
height:16px;
}
</style></p><p><script type="text/javascript"></p><p>
function showlist(dtNode)
{
var dlNodes = document.getElementsByTagName("dl");
var dlNode = dtNode.parentNode;
for(var i=0;i<dlNodes.length ;i++)
{
if(dtNode.parentNode==dlNodes[i])
{
if(dlNodes[i].className=="open")
dlNodes[i].className = "close";
else
dlNodes[i].className = "open";
}
else
dlNodes[i].className = "close";
}
}
</script>
</head></p><p><body></p><p><dl>
<dt onclick="showlist(this)">项目项目项目</dt>
<dd>呆在枯剞可哈根达在在在右</dd>
<dd>呆在枯剞可哈根达在在在右</dd>
<dd>呆在枯剞可哈根达在在在右</dd>
<dd>呆在枯剞可哈根达在在在右</dd>
</dl>
<dl>
<dt onclick="showlist(this)">项目项目项目</dt>
<dd>呆在枯剞可哈根达在在在右</dd>
<dd>呆在枯剞可哈根达在在在右</dd>
<dd>呆在枯剞可哈根达在在在右</dd>
<dd>呆在枯剞可哈根达在在在右</dd>
</dl>
<dl>
<dt onclick="showlist(this)">项目项目项目</dt>
<dd>呆在枯剞可哈根达在在在右</dd>
<dd>呆在枯剞可哈根达在在在右</dd>
<dd>呆在枯剞可哈根达在在在右</dd>
<dd>呆在枯剞可哈根达在在在右</dd>
</dl>
<dl >
<dt onclick="showlist(this)">项目项目项目</dt>
<dd>呆在枯剞可哈根达在在在右</dd>
<dd>呆在枯剞可哈根达在在在右</dd>
<dd>呆在枯剞可哈根达在在在右</dd>
<dd>呆在枯剞可哈根达在在在右</dd>
</dl></p><p></body>
</html>
</p>

复制代码

点击一个目录，只有这个目录展开，其它的目录全部关闭，按理来说一个目录展开的时候它后面的目录都会往后面相应地后退，可为什么我做的这个是这个目录下的内容把后面的目录直接覆盖住了呢，如图：
不知道什么原因，老师的视频里可以正常展开的啊

陈腾跃_2013 · 陈腾跃_2013

楼主用的是火狐浏览器测试吗？这个是火狐浏览器的兼容性问题（不支持overflow好像）。

李罡 · 李罡

陈腾跃_2013 发表于 2013-4-14 07:26
楼主用的是火狐浏览器测试吗？这个是火狐浏览器的兼容性问题（不支持overflow好像）。 ...

用的是IE9和360，都出现这种情况。。。

帐号		自动登录	找回密码
密码			加入黑马

一个列表展开的问题

评分

2 个回复