javascript树形菜单实例(简单的1.1)

最新推荐文章于 2023-09-20 14:48:11 发布

AngelCathy

最新推荐文章于 2023-09-20 14:48:11 发布

阅读量592

点赞数

分类专栏： javascript 文章标签： JavaScript ViewUI

javascript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏


<html>
	<head>
		<title>菜单树(我成功完成了)</title>	
		<script language="javascript">
			/*处理菜单树的显示样式*/
			function makeMenu1(){
				/*获取到id为t1的table*/
				var table1 = document.getElementById("t1");
				/*table1.style.display==""判断table1是否是是显示状     态，如果是当我们单击的时候就将他设为应藏状态，否则设置为隐藏状态*/
				if(table1.style.display==""){
					table1.style.display="none";
				}else{
					table1.style.display="";
				}			

			}

			/*功能和mekeMenu1是一模一样的*/
			function makeMenu2(){
				var table2 = document.getElementById("t2");
				if(table2.style.display==""){
					table2.style.display="none";
				}else{
					table2.style.display="";
				}				
			}

			function makeMenu3(){
				var table3 = document.getElementById("t3");
				if(table3.style.display==""){
					table3.style.display="none";
				}else{
					table3.style.display="";
				}	
			}
		</script>
	</head>
	<body>
		<form id="f1">
			<table >
			<tr>
				<td>
					<input type="button" style="width:11em" onclick="makeMenu1()"/>
					<%-- style="display:none" 默认的情况下设置为隐藏--%>
					<table id="t1"  style="display:none">
						<tr>
							<td>彩艳1</td>
						</tr>

						<tr>
							<td>于艳1</td>
						</tr>

						<tr>
							<td>王艳1</td>
						</tr>
					</table>
				</td>

			</tr>

			<tr>
				<td>
					<input type="button" style="width:11em"  onclick="makeMenu2()"/>

					<table style="display:none" id="t2">
						<tr>
							<td>彩艳2</td>
						</tr>

						<tr>
							<td>于艳2</td>
						</tr>

						<tr>
							<td>王艳2</td>
						</tr>
					</table>

				</td>
			</tr>

			<tr>
				<td>
					<input type="button" style="width:11em"  onclick="makeMenu3()"/>

					<table style="display:none" id="t3">
						<tr>
							<td>彩艳3</td>
						</tr>

						<tr>
							<td>于艳3</td>
						</tr>

						<tr>
							<td>王艳3</td>
						</tr>
					</table>

				</td>
			</tr>
		</table>
		</form>
	</body>
</html>