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

传智教育官网黑马程序员官网

 找回密码
 加入黑马
论坛首页 › 隐藏归类 › 黑马那些年 › 第8届JavaEE+hadoop大数据技术交流 › 正文

DOM：为什么列表会重叠在一起呢

© 猎鹰tianya 中级黑马   /  2014-2-10 16:23  /  1536 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 猎鹰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>
复制代码




评分

参与人数 1技术分 +1 收起 理由
FFF + 1 淡定

查看全部评分

0 个回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 加入黑马