黑马程序员技术交流社区

标题: DOM：为什么列表会重叠在一起呢 [打印本页]
作者: 猎鹰tianya    时间: 2014-2-10 16:23
标题: DOM：为什么列表会重叠在一起呢
本帖最后由 猎鹰tianya 于 2014-2-10 16:26 编辑

{:soso_e118:}真奔溃，怎么弄列表都是叠在一起，怎么回事呢？把老师的视频倒回去看，看来看去没看出问题，求高手解释！！

  1. <!DOCTYPE html>
  2. <html>

  4. <head>
  5.         <meta charset="UTF-8">
  6.         <title>Insert title here</title>
  7.         
  8.         <style type="text/css">
  9.                 dl dd{
  10.                         margin: 0px;
  11.                 }
  12.                
  13.                 dl{
  14.                         height: 16px;
  15.                 }
  16.                
  17.                 .open{
  18.                         overflow: visible;
  19.                 }
  20.                
  21.                 .close{
  22.                         overflow: hidden;
  23.                 }
  24.         </style>
  25.         
  26. </head>

  28. <body>

  30.         <script type="text/javascript">
  31.                 function list(node){
  32.                         var oDlNode =node.parentNode;
  33.                         if (oDlNode.className == "close") {
  34.                                 oDlNode.className = "open";
  35.                         } else {
  36.                                 oDlNode.className = "close";
  37.                         }
  38.                 }
  39.         </script>
  40.         
  41.         <dl class="close">
  42.                 <dt onclick="list(this)">显示条目一</dt>
  43.                 <dd>展开列表内容1</dd>
  44.                 <dd>展开列表内容1</dd>
  45.                 <dd>展开列表内容1</dd>
  46.                 <dd>展开列表内容1</dd>
  47.         </dl>
  48.         
  49.         <dl class="close">
  50.                 <dt onclick="list(this)">显示条目二</dt>
  51.                 <dd>展开列表内容2</dd>
  52.                 <dd>展开列表内容2</dd>
  53.                 <dd>展开列表内容2</dd>
  54.                 <dd>展开列表内容2</dd>
  55.         </dl>
  56.         
  57.         <dl class="close">
  58.                 <dt onclick="list(this)">显示条目三</dt>
  59.                 <dd>展开列表内容3</dd>
  60.                 <dd>展开列表内容3</dd>
  61.                 <dd>展开列表内容3</dd>
  62.                 <dd>展开列表内容3</dd>
  63.         </dl>
  64. </body>
  65. </html>
复制代码








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