黑马程序员技术交流社区

标题: 请教一个dom的问题，很纠结啊 [打印本页]
作者: 刘张朋    时间: 2013-7-11 21:08
标题: 请教一个dom的问题，很纠结啊
本帖最后由 刘张朋 于 2013-7-14 22:33 编辑

如下面的代码，我的运行结果跟毕老师视频上不一样，不知是不是浏览器的问题，还有就是我的这个点浏览器的时候演示一在ie和火狐上都不能展开，但是在搜狗上却可以，搞不懂啊。。。。。

                      我的运行结果                                                                                     老师运行结果

                                          

  2. <P> </P>
复制代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Insert title here</title>

  7. <script type="text/javascript">

  9. function openClose(){
  10. var node = event.srcElement;
  11. var dlNode = node.parentNode;

  13. var divNode = document.getElementById("divId");
  14. var dlNodes = divNode.getElementsByTagName("dl");

  16. for(var x=0;x<dlNodes.length;x++){

  18. if(dlNodes[x]==dlNode){
  19. if(dlNode.className=="open")
  20. dlNode.className = "close";
  21. else
  22. dlNode.className = "open";
  23. }
  24. else
  25. dlNodes[x].className = "close";
  26. }
  27. }

  29. </script>
  30. <style type="text/css">

  32. .open{
  33. overflow:visible;
  34. }
  35. .close{
  36. overflow:hidden;
  37. }
  38. dl{
  39. height:16px;
  40. overflow:hidden;
  41. }

  43. </style>

  45. </head>
  46. <body>

  48. <div id="divId">
  49. <dl>
  50. <dt onclick="openClose()">演示一</dt>
  51. <dd>冰川时代刚</dd>
  52. <dd>冰川时代刚</dd>
  53. <dd>冰川时代刚</dd>
  54. <dd>冰川时代刚</dd>
  55. </dl>
  56. <dl>
  57. <dt onclick="openClose()">演示二</dt>
  58. <dd>冰川时代刚</dd>
  59. <dd>冰川时代刚</dd>
  60. <dd>冰川时代刚</dd>
  61. <dd>冰川时代刚</dd>
  62. </dl>
  63. <dl>
  64. <dt onclick="openClose()">演示三</dt>
  65. <dd>冰川时代刚</dd>
  66. <dd>冰川时代刚</dd>
  67. <dd>冰川时代刚</dd>
  68. <dd>冰川时代刚</dd>
  69. </dl>
  70. </div>

  72. </body>
  73. </html>
复制代码




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