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

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

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

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

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

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


4 个回复

倒序浏览
第75行有错误,LZ先自己先自己看看。
回复 使用道具 举报
落木萧萧 发表于 2013-9-27 10:52
第75行有错误,LZ先自己先自己看看。

我也知道是那一块代码有问题,但是就是找不到问题所在啊
回复 使用道具 举报
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循环应该是小于等于



回复 使用道具 举报
落木萧萧 发表于 2013-9-27 11:50
要写成for循环应该是小于等于

呃,好吧,我太粗心了,这个错误都出现了
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马