DOM（二）-06-(示例-好友菜单)

最新推荐文章于 2023-08-16 22:56:56 发布

wy_0928

最新推荐文章于 2023-08-16 22:56:56 发布

阅读量273

点赞数

分类专栏： No.7-JavaWeb自学笔记（五）——DOM

本文链接：https://blog.csdn.net/wy_0928/article/details/47810509

版权

No.7-JavaWeb自学笔记（五）——DOM 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

<!--
DOM示例-好友菜单

类似QQ面板功能，若3个好友分组，单击第一个分组会显示该组成员，即菜单下拉，然后单击第二个分组，第一个分组会自动收起，且第二个分组
会顶格，不再像之前做的列表那样列表头不动。
-->

<!-- 【注意】程序中重难点部分会详细注释说明，其余如css样式，前期数据分布安排等不再说明 -->

<html>
	<head>
		<style type="text/css">
			
			/*对表格中的ul进行样式定义*/
			
			table ul{/*关联选择器*/
				list-style:none;/*去除无序列表的样式*/
				margin:0px;/*ul中内容左边顶格*/
				background-color:#26e356;
				/*
				 *打开CSS API，找到布局里面的display，其中有好多值，none可以用于隐藏对象，所以display:none功能类似于之前
				 *讲过的overflow:hidden。
				 */
				display:none;
				
				padding:0px;/*这行代码是为了兼容火狐浏览器，因为火狐每一项属性都要设置，而IE会有一些默认属性*/
			}
			
			/*对表格框线进行定义，以及单元格的框线进行定义*/
			
			table{
				border:#8080ff 1px solid;/*宽度1px，实线*/
				width:100px;
			}
			table td{
				border:#8080ff 1px solid;
				background-color:#f3c98f;
			}
			
			/*单元格中的超链接样式：单击前，单击后都一样*/
			
			table td a:link,table td a:visited{/*组合选择器*/
				color:#1f6df1;
				text-decoration:none;/*去下划线*/
			}
			
			table td a:hover{/*设置超链接在鼠标悬停时候的效果*/
				color:#df4011;
			}
			
			/*预定义一些样式，详见CSS API中的布局中的display*/
			.open{
				display:block;/*类似overflow:visible*/
			}
			
			.close{
				display:none;/*类似overflow:hidden*/
			}
		</style>
	</head>
	<body>
		<script type="text/javascript">
		
			function list(node){//定义onclick事件处理办法
				
				/*
				 *获取被操作的节点ul，因为οnclick="list(this)"是在a节点中，所以先用a拿到其父节点，然后用该父节点获取
				 *ul节点（由于火狐浏览器不支持直接拿下一个兄弟节点，且之前也讲过不建议用兄弟节点，所以这里不这么做）
				 */
				
				var oTdNode = node.parentNode;//通过当前被鼠标单击的节点对象获取其父节点td
				/*
				 *td是容器型标签，容器型标签中都具备根据标签名获取节点的方法
				 *通过td节点获取其内的ul节点，这个ul节点即为当前需要被操作的节点A
				 */
				var oUlNode = oTdNode.getElementsByTagName("ul")[0];
				
				//希望每次只开一个列表且关闭其他，即第一次开列表一，然后开列表二，此时列表一被自动关闭
				//获取表格中所有ul，先获取表格节点对象
				var oTableNode = document.getElementById("goodlist");//获取table节点对象
				var collUlNodes = oTableNode.getElementsByTagName("ul");//获取table中的所有ul节点对象
				
				for(var x=0;x<collUlNodes.length;x++){//遍历table中的所有ul节点
					
					if(collUlNodes[x] == oUlNode){//如果被遍历到的节点是A，那么进行“展开”和“收起”操作
						
						if(oUlNode.className == "close")//如果A现在是close状态
							oUlNode.className = "open";//那就将其open
						else//否则A现在是open状态
							oUlNode.className = "close";//那就将其close
						
					}else{//否则被遍历到的节点不是A，说明该节点不需要被操作，即不需要展开
						
						collUlNodes[x].className = "close";//那么直接将其close
						
					}
					
				}
				
			}
		
		</script>
		
		<table id="goodlist">
			<tr>
				<td>
					<a href="javascript:void(0)" οnclick="list(this)">好友菜单一</a>	<!-- 取消超链接的默认点击效果，详细解释见34-DOM-01 -->
					<ul class="close">	<!-- 用列表标签来完成 -->
						<li>张三1</li>
						<li>李四1</li>
						<li>王五1</li>
						<li>赵六1</li>
					</ul>
				</td>
			</tr>
			<tr>
				<td>
					<a href="javascript:void(0)" οnclick="list(this)">好友菜单二</a>
					<ul class="close">	
						<li>张三2</li>
						<li>李四2</li>
						<li>王五2</li>
						<li>赵六2</li>
					</ul>
				</td>
			</tr>
			<tr>
				<td>
					<a href="javascript:void(0)" οnclick="list(this)">好友菜单三</a>
					<ul class="close">
						<li>张三3</li>
						<li>李四3</li>
						<li>王五3</li>
						<li>赵六3</li>
					</ul>
				</td>
			</tr>
			<tr>
				<td>
					<a href="javascript:void(0)" οnclick="list(this)">好友菜单四</a>
					<ul class="close">
						<li>张三4</li>
						<li>李四4</li>
						<li>王五4</li>
						<li>赵六4</li>
					</ul>
				</td>
			</tr>
		</table>
	</body>
</html>