A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区
传智教育官网黑马程序员官网
只需一步,快速开始
Friendy89
中级黑马
黑马币:2
帖子:176
精华:0
© Friendy89 中级黑马 / 2013-9-27 09:49 / 1946 人查看 / 4 人回复 / 0 人收藏 转载请遵从CC协议 禁止商业使用本文
<P><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<A >http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</A>"> <html xmlns="<A >http://www.w3.org/1999/xhtml</A>"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> /* *对表格中的ul进行样式的定义 *1,去除无序列表的样式。 *2,将列表的外边距和内边距取消。 */ table ul{ list-style:none; margin:0px; padding:0px; background-color: #3F6; display:none;/*这个在CSS2.0文档中的属性中的布局里查找,隐藏列表下内容*/ } /* *对表格框线进行定义。 *以及单元格的框线进行定义 */ table{ border:#00F 1px solid; width:120px; } table td{ border:#00F 1px solid; background-color: #FF6; } /* *单元格中的超链接样式 *点击前和点击后一样 */ table td a:link,table td a:visited{ color:#F0F; text-decoration:none; } table td a:hover{ color:#0F0; } /* *预定义一些样式 *在CSS2.0文档中的属性中的布局里查找display属性 */ .open{ display:block; } .close{ display:none; } </style> </head></P> <P><body> <!-- 完成一个好友菜单,展开闭合的效果 而且要求一次开一个而关其它 --> <script type="text/javascript"> function list(node){ //获取被操作的节点ul /*先通过事件源超链接标签获取其父节点td, *然后通过父节点获取ul节点,一般不用兄弟节点获取, *因为它会根据浏览器不同会出现不同的兄弟节点 */ var oTdNode = node.parentNode; var oUlNode = oTdNode.getElementsByTagName("ul")[0]; //alert(oUlNode.nodeName); //获取表格中中的所有ul节点 //先获取表格节点对象 var oTabNode = document.getElementById("friendlist"); var collUlNodes = oTabNode.getElementsByTagName("ul"); for(var x=0;x=collUlNodes.length;x++){ if(collUlNodes[x]==oUlNode){ if(oUlNode.className == "open"){ oUlNode.className = "close"; }else{ oUlNode.className = "open"; } }else{ collUlNodes[x].className = "close"; } } //alert(oUlNode.className);//默认的oUlNode.className是null } </script> <table id="friendlist"> <tr> <td> <a href="javascript:void(0)" onclick="list(this)">我的好友</a> <ul> <li>好友1</li> <li>好友2</li> <li>好友3</li> <li>好友4</li> </ul> </td> </tr> <tr> <td> <a href="javascript:void(0)" onclick="list(this)">同事好友</a> <ul> <li>好友1</li> <li>好友2</li> <li>好友3</li> <li>好友4</li> </ul> </td> </tr> <tr> <td> <a href="javascript:void(0)" onclick="list(this)">大学同学</a> <ul> <li>好友1</li> <li>好友2</li> <li>好友3</li> <li>好友4</li> </ul> </td> </tr> <tr> <td> <a href="javascript:void(0)" onclick="list(this)">同城老乡</a> <ul> <li>好友1</li> <li>好友2</li> <li>好友3</li> <li>好友4</li> </ul> </td> </tr> </table> </body> </html> </P>复制代码 QQ截图20130927094948.png (34.87 KB, 下载次数: 7) 下载附件 2013-9-27 09:49 上传
QQ截图20130927094948.png (34.87 KB, 下载次数: 7)
下载附件
2013-9-27 09:49 上传
落木萧萧 发表于 2013-9-27 10:52 第75行有错误,LZ先自己先自己看看。
Friendy89 发表于 2013-9-27 11:45 我也知道是那一块代码有问题,但是就是找不到问题所在啊
落木萧萧 发表于 2013-9-27 11:50 要写成for循环应该是小于等于