A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 怪盗急得 中级黑马   /  2012-10-5 00:35  /  1564 人查看  /  1 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 陈德基 于 2012-10-5 11:22 编辑

这段代码是视频里的代码,但是用到自己的机子上的效果和视频里的不一样,主要是上面的<dl>标签内容会覆盖下一个<dl>标签的内容,但是视频里的效果是随着上面<dl>内部内容的显示,下面的<dl>标签内容也随着向下移动。
到底是哪里出了问题?
  1. <script type="text/javascript">
  2. function list()
  3. {
  4.         var dtNode = event.srcElement;
  5.         var dlNode = dtNode.parentNode;
  6.         if(dlNode.className=="open")
  7.         {
  8.                 dlNode.className = "close";
  9.         }
  10.         else
  11.         {
  12.                 dlNode.className = "open";
  13.         }
  14. }
  15. </script>
  16. <style type="text/css">
  17. .open{
  18.         
  19.         overflow:visible;
  20.         }
  21. .close{
  22.         
  23.         overflow:hidden;
  24.         }
  25. dl{
  26.         overflow:hidden;
  27.         height:16px;
  28.         }
  29. </style>
  30. </head>

  31. <body>

  32. <dl>
  33.     <dt onclick="list()">上层项目</dt>
  34.     <dd>啊恩阿讷嘎不必</dd>
  35.     <dd>啊恩阿讷嘎不必</dd>
  36.     <dd>啊恩阿讷嘎不必</dd>
  37.     <dd>啊恩阿讷嘎不必</dd>
  38.     <dd>啊恩阿讷嘎不必</dd>
  39. </dl>

  40. <dl>
  41.     <dt onclick="list()">上层项目</dt>
  42.     <dd>啊恩阿讷嘎不必</dd>
  43.     <dd>啊恩阿讷嘎不必</dd>
  44.     <dd>啊恩阿讷嘎不必</dd>
  45.     <dd>啊恩阿讷嘎不必</dd>
  46.     <dd>啊恩阿讷嘎不必</dd>
  47. </dl>
  48. </body>
  49. </html>
复制代码

评分

参与人数 1技术分 +1 收起 理由
刘芮铭 + 1 赞一个!

查看全部评分

1 个回复

倒序浏览
用div在外面套一层就好了。你自己把div的style写在外面吧。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
  <head>
    <title>script.html</title>
<script type="text/javascript">
  function list()
  {
          var dtNode = event.srcElement;
          var dlNode = dtNode.parentNode;
          if(dlNode.className=="open")
          {
                  dlNode.className = "close";
          }
          else
          {
                  dlNode.className = "open";
          }
  }
</script>
<style type="text/css">
   .open{
           
           overflow:visible;
           }
   .close{
           
           overflow:hidden;
           }
   dl{
           overflow:hidden;
           height:16px;
           }
</style>
</head>
<body>
<div style="width:200px;height:120px;">
<dl>
     <dt>上层项目</dt>
     <dd>啊恩阿讷嘎不必</dd>
     <dd>啊恩阿讷嘎不必</dd>
     <dd>啊恩阿讷嘎不必</dd>
     <dd>啊恩阿讷嘎不必</dd>
     <dd>啊恩阿讷嘎不必</dd>
</dl>
</div>
<div style="width:200px;height:120px;">
<dl>
     <dt>上层项目</dt>
     <dd>啊恩阿讷嘎不必</dd>
     <dd>啊恩阿讷嘎不必</dd>
     <dd>啊恩阿讷嘎不必</dd>
     <dd>啊恩阿讷嘎不必</dd>
     <dd>啊恩阿讷嘎不必</dd>
</dl>
</div>
</body>
</html>
  </head>
  <body>
  </body>
</html>

评分

参与人数 1技术分 +1 收起 理由
刘芮铭 + 1 赞一个!

查看全部评分

回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马