页面列表闭合与展开效果出不来，求救_html/css

页面列表闭合与展开效果出不来，求救_html/css_WEB-ITnose

WBOY

풀어 주다： 2016-06-21 08:52:47

원래의

1560명이 탐색했습니다.

回复讨论(解决方案)

发完整代码，不要发图片

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

无标题文档


 <script> 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"); for(var x; x<oCollUlNodes.length; x++){ if(oCollUlNodes[x] == oUlNodes){ if(oULNodes.className = "open"){ oUlNodes.className = "close"; }else{ oUlNodes.className = "open"; } }else{ oCollUlNodes.className = "close"; } } } </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; xif(oCollUlNodes[x] == oUlNodes){ //对象是按引用地址比较的。虽然两个jq对象中包含的元素一样，但引用地址不同也不相等
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整体意识还是模糊的