黑马程序员技术交流社区

标题: 关于javascript的问题 [打印本页]
作者: 怪盗急得    时间: 2012-10-5 00:35
标题: 关于javascript的问题
本帖最后由 陈德基 于 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>

  32. <body>

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

  43. <dl>
  44.     <dt onclick="list()">上层项目</dt>
  45.     <dd>啊恩阿讷嘎不必</dd>
  46.     <dd>啊恩阿讷嘎不必</dd>
  47.     <dd>啊恩阿讷嘎不必</dd>
  48.     <dd>啊恩阿讷嘎不必</dd>
  49.     <dd>啊恩阿讷嘎不必</dd>
  50. </dl>
  51. </body>
  52. </html>
复制代码
作者: 谭立文    时间: 2012-10-5 07:04
用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>




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