黑马程序员技术交流社区

标题: 一个列表展开的问题 [打印本页]
作者: 李罡    时间: 2013-4-14 01:30
标题: 一个列表展开的问题
  1. <p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a >http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
  2. <html xmlns="<a >http://www.w3.org/1999/xhtml</a>">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>无标题文档</title></p><p><style type="text/css"></p><p>.open{
  6. overflow:visible;
  7. }
  8. .close{
  9. overflow:hidden;
  10. }

  12. dl{
  13. overflow:hidden;
  14. height:16px;
  15. }
  16. </style></p><p><script type="text/javascript"></p><p>
  17. function showlist(dtNode)
  18. {
  19. var dlNodes = document.getElementsByTagName("dl");
  20. var dlNode = dtNode.parentNode;
  21. for(var i=0;i<dlNodes.length ;i++)
  22. {
  23.   if(dtNode.parentNode==dlNodes[i])
  24.   {
  25.    if(dlNodes[i].className=="open")
  26.     dlNodes[i].className = "close";
  27.    else
  28.     dlNodes[i].className = "open";  
  29.   }
  30.   else
  31.    dlNodes[i].className = "close";
  32. }
  33. }
  34. </script>
  35. </head></p><p><body></p><p><dl>
  36. <dt onclick="showlist(this)">项目项目项目</dt>
  37. <dd>呆在枯剞可哈根达在在在右</dd>
  38. <dd>呆在枯剞可哈根达在在在右</dd>
  39. <dd>呆在枯剞可哈根达在在在右</dd>
  40. <dd>呆在枯剞可哈根达在在在右</dd>
  41. </dl>
  42. <dl>
  43. <dt onclick="showlist(this)">项目项目项目</dt>
  44. <dd>呆在枯剞可哈根达在在在右</dd>
  45. <dd>呆在枯剞可哈根达在在在右</dd>
  46. <dd>呆在枯剞可哈根达在在在右</dd>
  47. <dd>呆在枯剞可哈根达在在在右</dd>
  48. </dl>
  49. <dl>
  50. <dt onclick="showlist(this)">项目项目项目</dt>
  51. <dd>呆在枯剞可哈根达在在在右</dd>
  52. <dd>呆在枯剞可哈根达在在在右</dd>
  53. <dd>呆在枯剞可哈根达在在在右</dd>
  54. <dd>呆在枯剞可哈根达在在在右</dd>
  55. </dl>
  56. <dl >
  57. <dt onclick="showlist(this)">项目项目项目</dt>
  58. <dd>呆在枯剞可哈根达在在在右</dd>
  59. <dd>呆在枯剞可哈根达在在在右</dd>
  60. <dd>呆在枯剞可哈根达在在在右</dd>
  61. <dd>呆在枯剞可哈根达在在在右</dd>
  62. </dl></p><p></body>
  63. </html>


  66. </p>
复制代码
点击一个目录，只有这个目录展开，其它的目录全部关闭，按理来说一个目录展开的时候它后面的目录都会往后面相应地后退，可为什么我做的这个是这个目录下的内容把后面的目录直接覆盖住了呢，如图：
不知道什么原因，老师的视频里可以正常展开的啊


QQ截图20130414012858.png (2.96 KB, 下载次数: 6)

QQ截图20130414012858.png

QQ截图20130414012919.png (2.87 KB, 下载次数: 10)

QQ截图20130414012919.png
作者: 陈腾跃_2013    时间: 2013-4-14 07:26
楼主用的是火狐浏览器测试吗？这个是火狐浏览器的兼容性问题（不支持overflow好像）。
作者: 李罡    时间: 2013-4-14 11:17
陈腾跃_2013 发表于 2013-4-14 07:26
楼主用的是火狐浏览器测试吗？这个是火狐浏览器的兼容性问题（不支持overflow好像）。 ...

用的是IE9和360，都出现这种情况。。。



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