黑马程序员技术交流社区

标题: 为什么我的隐藏内容展开后第二个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">

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

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




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