黑马程序员技术交流社区

标题: 为什么我的隐藏内容展开后第二个dl标签不会往下退呢,求解 [打印本页]

作者: hhmm665544    时间: 2014-4-14 16:13
标题: 为什么我的隐藏内容展开后第二个dl标签不会往下退呢,求解
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <script type="text/javascript">

  7. function list()
  8. {
  9.         //var node = document.getElementsByTagName("dt")[0];
  10.         var dtnode = event.srcElement;
  11.         dlnode = dtnode.parentNode;
  12.        
  13.         if(dlnode.className=="close")
  14.         {
  15.                 //node.className = "open"
  16.                 dlnode.className = "open";
  17.         }
  18.         else
  19.         {
  20.                 //node.className = "close";
  21.                 dlnode.className = "close";
  22.         }
  23. }
  24. </script>
  25. <style>
  26. .open{
  27.         height:16px;
  28.         overflow:visible;
  29. }
  30. .close{
  31.         height:16px;
  32.         overflow:hidden;
  33. }
  34. .dlhide{
  35.         height:16px;
  36.         overflow:hidden;
  37.         }
  38. .dlopen{
  39.         height:16px;
  40.         overflow:hidden;
  41.         }
  42. </style>
  43. </head>

  44. <body>
  45. <dl class="dlhide">
  46. <dt onclick="list()">上层项目上层项目</dt>
  47.         <dd>分的高分黄金</dd>
  48.     <dd>分的高分黄金</dd>
  49.     <dd>分的高分黄金</dd>
  50.     <dd>分的高分黄金</dd>
  51.     <dd>分的高分黄金</dd>
  52.     <dd>分的高分黄金</dd>
  53. </dl>
  54. <dl class="dlhide">
  55. <dt onclick="list()">上层项目上层项目</dt>
  56.         <dd>分的高分黄金</dd>
  57.     <dd>分的高分黄金</dd>
  58.     <dd>分的高分黄金</dd>
  59.     <dd>分的高分黄金</dd>
  60.     <dd>分的高分黄金</dd>
  61.     <dd>分的高分黄金</dd>
  62. </dl>
  63. </body>
  64. </html>
复制代码





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