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

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

 找回密码
 加入黑马

QQ登录

只需一步，快速开始

论坛首页 › 隐藏归类 › 黑马那些年 › 第6届JavaEE+hadoop大数据技术交流 › 正文

DOM问题

© Friendy89 中级黑马   /  2013-9-27 09:49  /  1874 人查看  /  4 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 Friendy89 于 2013-9-27 15:47 编辑

为什么点击列表展开没反应

  2. <P><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<A >http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</A>">
  3. <html xmlns="<A >http://www.w3.org/1999/xhtml</A>">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>无标题文档</title>
  7. <style type="text/css">
  8.   /*
  9.    *对表格中的ul进行样式的定义
  10.    *1，去除无序列表的样式。
  11.    *2，将列表的外边距和内边距取消。
  12.    */
  13.    table ul{
  14.     list-style:none;
  15.     margin:0px;
  16.     padding:0px;
  17.     background-color: #3F6;
  18.        display:none;/*这个在CSS2.0文档中的属性中的布局里查找，隐藏列表下内容*/
  19.    }
  20.    /*
  21.     *对表格框线进行定义。
  22.     *以及单元格的框线进行定义
  23.     */
  24.     table{
  25.      border:#00F 1px solid;
  26.      width:120px;
  27.     }
  28.     table td{
  29.      border:#00F 1px solid;
  30.      background-color: #FF6;
  31.     }
  32.     /*
  33.      *单元格中的超链接样式
  34.      *点击前和点击后一样
  35.      */
  36.      table td a:link,table td a:visited{
  37.       color:#F0F;
  38.       text-decoration:none;
  39.      }
  40.      table td a:hover{
  41.       color:#0F0;
  42.      }
  43.      /*
  44.       *预定义一些样式
  45.    *在CSS2.0文档中的属性中的布局里查找display属性
  46.    */
  47.    .open{
  48.     display:block;
  49.    }
  50.    .close{
  51.     display:none;
  52.    }
  53. </style>
  54. </head></P>
  55. <P><body>
  56. <!--
  57.     完成一个好友菜单，展开闭合的效果
  58.     而且要求一次开一个而关其它
  59.     -->
  60.     <script type="text/javascript">
  61.   function list(node){
  62.    //获取被操作的节点ul
  63.    /*先通过事件源超链接标签获取其父节点td，
  64.     *然后通过父节点获取ul节点，一般不用兄弟节点获取，
  65.     *因为它会根据浏览器不同会出现不同的兄弟节点
  66.     */
  67.     var oTdNode = node.parentNode;
  68.     var oUlNode = oTdNode.getElementsByTagName("ul")[0];
  69.     //alert(oUlNode.nodeName);
  70.    
  71.     //获取表格中中的所有ul节点
  72.     //先获取表格节点对象
  73.     var oTabNode = document.getElementById("friendlist");
  74.     var collUlNodes = oTabNode.getElementsByTagName("ul");
  75.     for(var x=0;x=collUlNodes.length;x++){
  76.      if(collUlNodes[x]==oUlNode){
  77.       if(oUlNode.className == "open"){
  78.       oUlNode.className = "close";
  79.      }else{
  80.       oUlNode.className = "open";   
  81.      }
  82.      }else{
  83.       collUlNodes[x].className = "close";
  84.      }
  85.     }
  86.    
  87.     //alert(oUlNode.className);//默认的oUlNode.className是null
  88.    
  89.   }
  90. </script>
  91.     <table id="friendlist">
  92.      <tr>
  93.          <td>
  94.              <a href="javascript:void(0)" onclick="list(this)">我的好友</a>
  95.                 <ul>
  96.                  <li>好友1</li>
  97.                     <li>好友2</li>
  98.                     <li>好友3</li>
  99.                     <li>好友4</li>
  100.                 </ul>
  101.             </td>
  102.         </tr>
  103.         <tr>
  104.          <td>
  105.              <a href="javascript:void(0)" onclick="list(this)">同事好友</a>
  106.                 <ul>
  107.                  <li>好友1</li>
  108.                     <li>好友2</li>
  109.                     <li>好友3</li>
  110.                     <li>好友4</li>
  111.                 </ul>
  112.             </td>
  113.         </tr>
  114.         <tr>
  115.          <td>
  116.              <a href="javascript:void(0)" onclick="list(this)">大学同学</a>
  117.                 <ul>
  118.                  <li>好友1</li>
  119.                     <li>好友2</li>
  120.                     <li>好友3</li>
  121.                     <li>好友4</li>
  122.                 </ul>
  123.             </td>
  124.         </tr>
  125.         <tr>
  126.          <td>
  127.              <a href="javascript:void(0)" onclick="list(this)">同城老乡</a>
  128.                 <ul>
  129.                  <li>好友1</li>
  130.                     <li>好友2</li>
  131.                     <li>好友3</li>
  132.                     <li>好友4</li>
  133.                 </ul>
  134.             </td>
  135.         </tr>
  136.     </table>
  137. </body>
  138. </html>
  139. </P>
复制代码


contentPUBLICstyletitlePUBLIC

4 个回复

倒序浏览
落木萧萧 高级黑马 2013-9-27 10:52:50
| 只看该作者
沙发
第75行有错误，LZ先自己先自己看看。
回复 使用道具 举报
Friendy89 中级黑马 2013-9-27 11:45:36
| 只看该作者
藤椅
落木萧萧 发表于 2013-9-27 10:52
第75行有错误，LZ先自己先自己看看。

我也知道是那一块代码有问题，但是就是找不到问题所在啊
回复 使用道具 举报
落木萧萧 高级黑马 2013-9-27 11:50:36
| 只看该作者
板凳
Friendy89 发表于 2013-9-27 11:45
我也知道是那一块代码有问题，但是就是找不到问题所在啊
  1. for(var x=0;x=collUlNodes.length;x++){
复制代码
要写成
  1. for(var x=0;x<=collUlNodes.length;x++){
复制代码
for循环应该是小于等于



回复 使用道具 举报
Friendy89 中级黑马 2013-9-27 13:50:31
| 只看该作者
报纸
落木萧萧 发表于 2013-9-27 11:50
要写成for循环应该是小于等于

呃，好吧，我太粗心了，这个错误都出现了
回复 使用道具 举报
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 加入黑马