Home >Web Front-end >HTML Tutorial >页面列表闭合与展开效果出不来，求救_html/css_WEB-ITnose
页面列表闭合与展开效果出不来，求救_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 08:52:471557browse
回复讨论(解决方案)
发完整代码，不要发图片
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script> <br /> <br /> function list(node){ <br /> //获取被操作的节点ul。 <br /> /* <br /> * 先通过事件源超链接标签获取其父节点td，然后在通过父节点获取ul节点。 <br /> */ <br /> var oTdNode = node.parentNode; <br /> var oUlNodes = oTdNode.getElementsByTagName("ul")[0]; <br /> //alert(oUlNodes.nodeName); <br /> <br /> //获取表格中所有的ul。 <br /> //先获取表格节点对象。 <br /> var oTabNode = document.getElementById("goodlist"); <br /> var oCollUlNodes = oTabNode.getElementsByTagName("ul"); <br /> for(var x; x<oCollUlNodes.length; x++){ <br /> if(oCollUlNodes[x] == oUlNodes){ <br /> if(oULNodes.className = "open"){ <br /> oUlNodes.className = "close"; <br /> }else{ <br /> oUlNodes.className = "open"; <br /> } <br /> }else{ <br /> oCollUlNodes.className = "close"; <br /> } <br /> } <br /> } <br /> <br /> </script>
| 好友菜单
|
| 好友菜单
|
| 好友菜单
|
| 好友菜单
|
上面图片代码就是完整的，一直按顺序
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css"> /**对表格的Ul样式进行定义*去除无序样式*将列表外编剧取消**/table ul{margin:0px;list-style:none;padding:0px;background-color:#3C9DFF; } /*对表格进行样式定义*对表格框线进行定义。* 以及单元格的框线进行定义**/table { border:#86FFFF 2px thin;width:80px; }table td{border:#8080ff 1px solid;background-color:#f3c98f;padding:0px; }/**取消超链接样式**/table td a:link,table td a:visited{color:#FF0B0B;text-decoration:none; }/*预定义一些样式*/.open{display:block; }.close{display:none; } </style> <script type="text/javascript"> function list(node) { //获取被操作的节点ul。 /* * 先通过事件源超链接标签获取其父节点td，然后在通过父节点获取ul节点。 */ var oTdNode = node.parentNode; var oUlNodes = oTdNode.getElementsByTagName("ul")[0]; //alert(oUlNodes.nodeName); //获取表格中所有的ul。 //先获取表格节点对象。 var oTabNode = document.getElementById("goodlist"); var oCollUlNodes = oTabNode.getElementsByTagName("ul"); if (oUlNodes.className == "open") { oUlNodes.className = "close"; } else { for (var x = 0; x < oCollUlNodes.length; x++) oCollUlNodes[x].className = "close"; oUlNodes.className = "open"; }} </script></head><body><table id="goodlist"> <tr> <td> <a href="javascript:void(0)" onclick="list(this)">好友菜单</a> <ul class="open"> <li>一个好友</li> <li>一个好友</li> <li>一个好友</li> <li>一个好友</li> </ul> </td> </tr> <tr> <td> <a href="javascript:void(0)" onclick="list(this)">好友菜单</a> <ul class="close"> <li>一个好友</li> <li>一个好友</li> <li>一个好友</li> <li>一个好友</li> </ul> </td> </tr> <tr> <td> <a href="javascript:void(0)" onclick="list(this)">好友菜单</a> <ul class="close"> <li>一个好友</li> <li>一个好友</li> <li>一个好友</li> <li>一个好友</li> </ul> </td> </tr> <tr> <td> <a href="javascript:void(0)" onclick="list(this)">好友菜单</a> <ul class="close"> <li>一个好友</li> <li>一个好友</li> <li>一个好友</li> <li>一个好友</li> </ul> </td> </tr> </table> </body></html>
上面图片代码就是完整的，一直按顺序
主要是你发图片别人不好调试
代码我自己觉得没有问题，但就是出不了结果
谢谢，你的代码可以出结果，你看看我的代码哪里出差错了
谢谢，你的代码可以出结果，你看看我的代码哪里出差错了
你代码错误很多，逻辑性错误就不说了，只说语法错误
var oTabNode = document.getElementById("goodlist");
var oCollUlNodes = oTabNode.getElementsByTagName("ul");
for(var x; x
if(oULNodes.className = "open"){ //比较相等用 “==” 。 oULNodes的l是小写
oUlNodes.className = "close";
}else{
oUlNodes.className = "open";
}
}else{
oCollUlNodes.className = "close"; //应该oCollUlNodes[x].className
}
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script><script type="text/javascript">$(function(){ $(".hylist").click(function(){ $(this).parent().addClass('active').siblings().removeClass('active'); });});</script><style type="text/css">dl,dd,dt{margin:0;padding:0;}.box{width:200px;background:#66cccc;line-height:24px;font-size:14px;text-align:center;}.box .hylist{background:#ff9966;color:#fff;}.box dd{display:none;}.box .active .hylist{border-left:8px solid #f00;}.box .active dd{display:block;}</style><div class="box"> <dl class="active"><dt class="hylist">好友菜单</dt><dd>一个好友11</dd><dd>一个好友12</dd><dd>一个好友13</dd></dl> <dl class=""><dt class="hylist">好友菜单</dt><dd>一个好友21</dd><dd>一个好友22</dd><dd>一个好友23</dd></dl> <dl class=""><dt class="hylist">好友菜单</dt><dd>一个好友31</dd><dd>一个好友32</dd><dd>一个好友33</dd></dl></div> 十分感谢你，能给我一些指导吗，因为我自己在自学web前端,对于web整体意识还是模糊的
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：初学css,怎么能获得这样的效果，调试了半天，都不行，请高人指点下！_html/css_WEB-ITnoseNext article：为自己搭建一个鹊桥 Native Page与Web View之间的JSBridge实现方式_html/css_WEB-ITnose