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

传智教育官网黑马程序员官网

 找回密码
 加入黑马

QQ登录

只需一步，快速开始

论坛首页 › 隐藏归类 › 黑马那些年 › 第15届Android交流区 › 正文

又是一个关于html的例题

© 王梁星 中级黑马   /  2012-10-29 22:38  /  1406 人查看  /  7 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 王梁星 于 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没成功阿。。求解
复制代码

评分

参与人数 1技术分 +1 收起 理由
韩军博 + 1 很给力!

查看全部评分

7 个回复

倒序浏览
sixth 中级黑马 2012-10-30 09:55:37
| 只看该作者
沙发
我在我机子上运行了一下，没有问题，我的是32位的Windows7
回复 使用道具 举报
王梁星 中级黑马 2012-10-30 10:31:29
| 只看该作者
藤椅
本帖最后由 王梁星 于 2012-10-30 10:32 编辑
sixth 发表于 2012-10-30 09:55
我在我机子上运行了一下，没有问题，我的是32位的Windows7

你的浏览器是哪款？这可能是个兼容性问题。视频里，毕老师用的是IE6
回复 使用道具 举报
sixth 中级黑马 2012-10-30 13:28:19
| 只看该作者
板凳
王梁星 发表于 2012-10-30 10:31
你的浏览器是哪款？这可能是个兼容性问题。视频里，毕老师用的是IE6

我用的是IE8
回复 使用道具 举报
王梁星 中级黑马 2012-10-30 14:00:38
| 只看该作者
报纸
sixth 发表于 2012-10-30 13:28
我用的是IE8

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

你的，是不是点了两下，才有效果？不是点一下就该隐藏的吗，我的要点两下
回复 使用道具 举报
舒远 黑马帝 2012-10-30 23:26:46
| 只看该作者
地板
本帖最后由 舒远 于 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)"

试试吧、、

评分

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

查看全部评分

回复 使用道具 举报
王梁星 中级黑马 2012-10-31 10:58:31
| 只看该作者
7#
舒远 发表于 2012-10-30 23:26
linux里用的是firefox吧？firefox里不支持event对象的。需要将event作为参数传到方法中。IE里支持Window.ev ...

我明白了，看来做web开发，必须处理好兼容性问题阿
回复 使用道具 举报
王梁星 中级黑马 2012-10-31 11:34:22
| 只看该作者
8#
舒远 发表于 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此法不管用
回复 使用道具 举报
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 加入黑马