黑马程序员技术交流社区

标题: javaScript中的文字开关闭合效果文字重叠在一起 [打印本页]
作者: 黄基焜    时间: 2013-6-8 14:50
标题: javaScript中的文字开关闭合效果文字重叠在一起
本帖最后由 黄基焜 于 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"

  18.         
  19. }

  21. </script>
  22. <style type="text/css">
  23. .open{

  25.         overflow:visible;
  26.         }
  27. .close{

  29.         overflow:hidden;
  30.         }
  31. dl{
  32.         overflow:hidden;
  33.         height:16px;
  34. }
  35. </style>

  37. </head>

  39. <body>
  40. <dl onclick="change()">
  41.         <dt>上层标题上层标题</dt>
  42.         <dd>下层标题下层标题下层标题</dd>
  43.     <dd>下层标题下层标题下层标题</dd>
  44.     <dd>下层标题下层标题下层标题</dd>
  45.     <dd>下层标题下层标题下层标题</dd>
  46. </dl>

  48. <dl onclick="change()">
  49.         <dt>上层标题上层标题</dt>
  50.         <dd>下层标题下层标题下层标题</dd>
  51.     <dd>下层标题下层标题下层标题</dd>
  52.     <dd>下层标题下层标题下层标题</dd>
  53.     <dd>下层标题下层标题下层标题</dd>
  54. </dl>
  55. </body>
  56. </html>
复制代码
效果图如下：文字为什么会叠在一起啊？毕老师的会自动延伸的

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

未命名.jpg
作者: 刘凯    时间: 2013-6-8 14:53
我当时也是出现这个问题，后来记得是放弃了overflow  改用了display属性来完成的这个效果      等高手解答
作者: sweethui1    时间: 2013-6-8 18:28
我也是出现这个问题，后来我把 .open 里的高度设置为自动就可以了。代码如下：
.open{
        height:auto;
        overflow:visible
}

.close
{
       
        overflow:hidden;
}

dl{
        height:16px;
        overflow:hidden;
        }
作者: 黄基焜    时间: 2013-6-9 10:19
也就只能这样了



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