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

Home

Web Front-end

HTML Tutorial

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:52 AM

回复讨论(解决方案)

发完整代码，不要发图片

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整体意识还是模糊的

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

What is the purpose of the <datalist> element?Mar 21, 2025 pm 12:33 PM

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

What is the purpose of the <progress> element?Mar 21, 2025 pm 12:34 PM

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

What is the purpose of the <meter> element?Mar 21, 2025 pm 12:35 PM

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

What is the purpose of the <iframe> tag? What are the security considerations when using it?Mar 20, 2025 pm 06:05 PM

The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.

What is the viewport meta tag? Why is it important for responsive design?Mar 20, 2025 pm 05:56 PM

The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.

How do I use HTML5 form validation attributes to validate user input?Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

What are the best practices for cross-browser compatibility in HTML5?Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

How do I use the HTML5 <time> element to represent dates and times semantically?Mar 12, 2025 pm 04:05 PM

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

See all articles