黑马程序员技术交流社区

标题: <已解决>JavaScript 关于网页展开闭合效果的问题 [打印本页]
作者: 赵玮_Tom    时间: 2012-6-3 17:52
标题: <已解决>JavaScript 关于网页展开闭合效果的问题
本帖最后由 赵玮_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系统

QQ截图20120603174719.png (12.72 KB, 下载次数: 42)

我的结果

我的结果

QQ截图20120603175306.png (28.27 KB, 下载次数: 38)

老毕的结果

老毕的结果
作者: 赵玮_Tom    时间: 2012-6-3 21:14
坐等高人
作者: 杜俊彪    时间: 2012-6-3 22:09
我也坐等高人，    JavaScript还没怎么看；   
作者: 黄连兵    时间: 2012-6-4 12:08
可是老毕的怎么会运行出来不一样的效果呢？
作者: 马东华    时间: 2012-6-6 18:41
就是啊，这是为什么啊，希望高人给予解答
作者: 马东华    时间: 2012-6-6 18:51
ttkl123654 发表于 2012-6-3 23:31
我改了这两处，可以用了。
1. 上层项目生产实得分 加onClick="list(this)
2.close{
  1. .open{
  2.         height:auto;
  3. overflow:visible;
  4. }
  5. .close{
  6.        // height:auto;
  7. overflow:hidden;
  8. }
复制代码
我刚试了下，好像是把open那里的height变成自动。

谢谢了，终于我的页面可以自由展开了，呵呵，多谢了，虽然不知道毕老师的是怎么回事，呵呵
作者: 马东华    时间: 2012-6-6 18:52
ttkl123654 发表于 2012-6-3 23:31
我改了这两处，可以用了。
1. 上层项目生产实得分 加onClick="list(this)
2.close{
  1. .open{
  2.         height:auto;
  3. overflow:visible;
  4. }
  5. .close{
  6.        // height:auto;
  7. overflow:hidden;
  8. }
复制代码
我刚试了下，好像是把open那里的height变成自动。

谢谢了，终于我的页面可以自由展开了，呵呵，多谢了，虽然不知道毕老师的是怎么回事，呵呵



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2