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

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 黄基焜 于 2013-6-9 10:19 编辑
  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" src="doctool.js"></script>
  7. <script type="text/javascript">
  8. function change()
  9. {
  10.         var dtNode = event.srcElement;
  11.         var dlnode = dtNode.parentNode;
  12.         //alert(divNode.nodeName);
  13.         if(dlnode.className == "open")
  14.                 dlnode.className = "close"
  15.         else
  16.                 dlnode.className = "open"

  17.         
  18. }

  19. </script>
  20. <style type="text/css">
  21. .open{

  22.         overflow:visible;
  23.         }
  24. .close{

  25.         overflow:hidden;
  26.         }
  27. dl{
  28.         overflow:hidden;
  29.         height:16px;
  30. }
  31. </style>

  32. </head>

  33. <body>
  34. <dl onclick="change()">
  35.         <dt>上层标题上层标题</dt>
  36.         <dd>下层标题下层标题下层标题</dd>
  37.     <dd>下层标题下层标题下层标题</dd>
  38.     <dd>下层标题下层标题下层标题</dd>
  39.     <dd>下层标题下层标题下层标题</dd>
  40. </dl>

  41. <dl onclick="change()">
  42.         <dt>上层标题上层标题</dt>
  43.         <dd>下层标题下层标题下层标题</dd>
  44.     <dd>下层标题下层标题下层标题</dd>
  45.     <dd>下层标题下层标题下层标题</dd>
  46.     <dd>下层标题下层标题下层标题</dd>
  47. </dl>
  48. </body>
  49. </html>
复制代码
效果图如下:文字为什么会叠在一起啊?毕老师的会自动延伸的

未命名.jpg (16.16 KB, 下载次数: 0)

未命名.jpg

评分

参与人数 1技术分 +1 收起 理由
刘凯 + 1

查看全部评分

3 个回复

正序浏览
也就只能这样了
回复 使用道具 举报
我也是出现这个问题,后来我把 .open 里的高度设置为自动就可以了。代码如下:
.open{
        height:auto;
        overflow:visible
}

.close
{
       
        overflow:hidden;
}

dl{
        height:16px;
        overflow:hidden;
        }
回复 使用道具 举报
我当时也是出现这个问题,后来记得是放弃了overflow  改用了display属性来完成的这个效果      等高手解答
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马