黑马程序员技术交流社区

标题: 又是一个关于html的例题 [打印本页]
作者: 王梁星    时间: 2012-10-29 22:38
标题: 又是一个关于html的例题
本帖最后由 王梁星 于 2012-10-29 22:43 编辑
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6.         <title></title>
  7. <script type="text/javascript" >
  8. function showCom()
  9. {
  10.    var dtNode=event.srcElement;   
  11.    var dlNode=dtNode.parentNode;
  12.          if(dlNode.className=="open")
  13.          {
  14.            dlNode.className="close";
  15.          }
  16.          else
  17.          {
  18.            dlNode.className="open";
  19.          }
  20. }
  21. </script>
  22. <style type="text/css">
  23. .close{
  24.   height: 30px;
  25.   overflow: hidden;
  26. }
  27. .open{
  28.   height: 30px;
  29.   overflow: visible;
  30. }
  31. </style>
  32. </head>
  33. <body>

  35. <dl>
  36. <dt onclick="showCom()">fdsfdsf</dt>
  37. <dd>fhgfhgfhtr</dd>
  38. <dd>fhgfhgfhtr</dd>
  39. <dd>fhgfhgfhtr</dd>
  40. <dd>fhgfhgfhtr</dd>
  41. </dl>
  42. <dl>
  43. <dt onclick="showCom()">fdsfdsf</dt>
  44. <dd>fhgfhgfhtr</dd>
  45. <dd>fhgfhgfhtr</dd>
  46. <dd>fhgfhgfhtr</dd>
  47. <dd>fhgfhgfhtr</dd>
  48. </dl>
  49. <dl>
  50. <dt onclick="showCom()">fdsfdsf</dt>
  51. <dd>fhgfhgfhtr</dd>
  52. <dd>fhgfhgfhtr</dd>
  53. <dd>fhgfhgfhtr</dd>
  54. <dd>fhgfhgfhtr</dd>
  55. </dl>

  57. </body>
  58. </html>

  60. 请诸位在自己电脑上试试，此html代码，是否可用。linux里，event未定义，是不是event是windows独有的对象？不过windows没成功阿。。求解
复制代码
作者: sixth    时间: 2012-10-30 09:55
我在我机子上运行了一下，没有问题，我的是32位的Windows7
作者: 王梁星    时间: 2012-10-30 10:31
本帖最后由 王梁星 于 2012-10-30 10:32 编辑
sixth 发表于 2012-10-30 09:55
我在我机子上运行了一下，没有问题，我的是32位的Windows7

你的浏览器是哪款？这可能是个兼容性问题。视频里，毕老师用的是IE6
作者: sixth    时间: 2012-10-30 13:28
王梁星 发表于 2012-10-30 10:31
你的浏览器是哪款？这可能是个兼容性问题。视频里，毕老师用的是IE6

我用的是IE8
作者: 王梁星    时间: 2012-10-30 14:00
sixth 发表于 2012-10-30 13:28
我用的是IE8

IE10点击该代码生成的页面无效果，

你的，是不是点了两下，才有效果？不是点一下就该隐藏的吗，我的要点两下
作者: 舒远    时间: 2012-10-30 23:26
本帖最后由 舒远 于 2012-10-30 23:36 编辑

linux里用的是firefox吧？firefox里不支持event对象的。需要将event作为参数传到方法中。IE里支持Window.event的方式直接调用

function showCom(event){
event =  Window.event || event;//判断是否可以直接使用Window.event.兼容IE和firefox的方式。
}

调用的时候onclick="showCom(event)"

试试吧、、
作者: 王梁星    时间: 2012-10-31 10:58
舒远 发表于 2012-10-30 23:26
linux里用的是firefox吧？firefox里不支持event对象的。需要将event作为参数传到方法中。IE里支持Window.ev ...

我明白了，看来做web开发，必须处理好兼容性问题阿
作者: 王梁星    时间: 2012-10-31 11:34
舒远 发表于 2012-10-30 23:26
linux里用的是firefox吧？firefox里不支持event对象的。需要将event作为参数传到方法中。IE里支持Window.ev ...
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6.         <title></title>
  7. <script type="text/javascript" >
  8. function showCom(event)
  9. {
  10.    var dtNode=event.srcElement || event.target;   
  11.    var dlNode=dtNode.parentNode;
  12.          if(dlNode.className=="open")
  13.          {
  14.            dlNode.className="close";
  15.          }
  16.          else
  17.          {
  18.            dlNode.className="open";
  19.          }
  20. }
  21. </script>
  22. <style type="text/css">
  23. .close{
  24.   height: 30px;
  25.   overflow: hidden;
  26. }
  27. .open{
  28.   height: 30px;
  29.   overflow: visible;
  30. }
  31. </style>
  32. </head>
  33. <body>

  35. <dl>
  36. <dt onclick="showCom(event)">fdsfdsf</dt>
  37. <dd>fhgfhgfhtr</dd>
  38. <dd>fhgfhgfhtr</dd>
  39. <dd>fhgfhgfhtr</dd>
  40. <dd>fhgfhgfhtr</dd>
  41. </dl>
  42. <dl>
  43. <dt onclick="showCom(event)">fdsfdsf</dt>
  44. <dd>fhgfhgfhtr</dd>
  45. <dd>fhgfhgfhtr</dd>
  46. <dd>fhgfhgfhtr</dd>
  47. <dd>fhgfhgfhtr</dd>
  48. </dl>
  49. <dl>
  50. <dt onclick="showCom(event)">fdsfdsf</dt>
  51. <dd>fhgfhgfhtr</dd>
  52. <dd>fhgfhgfhtr</dd>
  53. <dd>fhgfhgfhtr</dd>
  54. <dd>fhgfhgfhtr</dd>
  55. </dl>

  57. </body>
  58. </html>
复制代码
这样就可以了，但问题是firefox折叠打开不如IE那么正常。而且IE10此法不管用



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