本帖最后由 赵玮_Tom 于 2012-6-4 06:34 编辑
毕老师在JavaScript视频中讲解DOM编程中有个实例,内容是实现网页内容展开闭合效果。代码如下:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function list(dtNode)//实现展开闭合的方法
{
var dlNode = dtNode.parentNode;
if(dlNode.className=="open")
{
dlNode.className="close";
}
else
{
dlNode.className="open";
}
}
</script>
<style type="text/css">//CSS代码
.open{
overflow:visible;
}
.close{
overflow:hidden;
}
dl{
overflow:hidden;
height:16px;
}
</style>
</head>
<body>
<dl>
<dt>上层项目生产实得分</dt>
<dd>似的疯狂说了句法士大夫实得分实得分</dd>
<dd>似的疯狂说了句法士大夫实得分实得分</dd>
<dd>似的疯狂说了句法士大夫实得分实得分</dd>
<dd>似的疯狂说了句法士大夫实得分实得分</dd>
<dd>似的疯狂说了句法士大夫实得分实得分</dd>
<dd>似的疯狂说了句法士大夫实得分实得分</dd>
<dd>似的疯狂说了句法士大夫实得分实得分</dd>
</dl>
<dl>
<dt>上层项目生产实得分</dt>
<dd>似的疯狂说了句法士大夫实得分实得分</dd>
<dd>似的疯狂说了句法士大夫实得分实得分</dd>
<dd>似的疯狂说了句法士大夫实得分实得分</dd>
<dd>似的疯狂说了句法士大夫实得分实得分</dd>
<dd>似的疯狂说了句法士大夫实得分实得分</dd>
<dd>似的疯狂说了句法士大夫实得分实得分</dd>
<dd>似的疯狂说了句法士大夫实得分实得分</dd>
</dl>
<dl>
<dt>上层项目生产实得分</dt>
<dd>似的疯狂说了句法士大夫实得分实得分</dd>
<dd>似的疯狂说了句法士大夫实得分实得分</dd>
<dd>似的疯狂说了句法士大夫实得分实得分</dd>
<dd>似的疯狂说了句法士大夫实得分实得分</dd>
<dd>似的疯狂说了句法士大夫实得分实得分</dd>
<dd>似的疯狂说了句法士大夫实得分实得分</dd>
<dd>似的疯狂说了句法士大夫实得分实得分</dd>
</dl>
<dl>
<dt>上层项目生产实得分</dt>
<dd>似的疯狂说了句法士大夫实得分实得分</dd>
<dd>似的疯狂说了句法士大夫实得分实得分</dd>
<dd>似的疯狂说了句法士大夫实得分实得分</dd>
<dd>似的疯狂说了句法士大夫实得分实得分</dd>
<dd>似的疯狂说了句法士大夫实得分实得分</dd>
<dd>似的疯狂说了句法士大夫实得分实得分</dd>
<dd>似的疯狂说了句法士大夫实得分实得分</dd>
</dl>
</body>
</html>
却得到了和老毕不一样的效果(未展开的列表内容被展开的列表内容遮盖),如图,不知为啥,求高手解决,谢谢!。
注:我的浏览器是IE8.0,win7系统
|
|