DHTML----菜单项的折叠功能

最新推荐文章于 2022-10-19 10:19:19 发布

wangjian_an

最新推荐文章于 2022-10-19 10:19:19 发布

阅读量757

点赞数

分类专栏：网页制作 web前端知识

本文链接：https://blog.csdn.net/wangjian_an/article/details/51699083

版权

web前端知识同时被 2 个专栏收录

21 篇文章 1 订阅

订阅专栏

网页制作

16 篇文章 0 订阅

订阅专栏

利用table进行封装，在利用class属性设置开关，设置其ul的disolay属性能不能用，下面是具体代码

<!DOCTYPE html>
<html>
  <head>
  	<style type="text/css">
  		/*ul{
			//display:none;//块显示
		}*/
		table{
			padding:5px;
		}
		table ul{
			margin:2px;
			padding:2px;
			list-style-type:circle;
			background-color:#ff8000;
			display:none;
		}
		a:link ,a:visited{
			color:#800040;
			text-decoration:line-through;
		}
		a:hover{
			color:#ff0080;
		}
		a:active{
			color:#000000;
			font-size:27px;
		}
		.open{
			display:block;
		}
		.close{
			display:none;
		}
  	</style>
    <title>listMenus.html</title>
	<script type="text/javascript">
		function list(node){
			var ulNodes=node.parentNode.parentNode.parentNode.getElementsByTagName("ul");
			for(var i=0;i<ulNodes.length;i++){
				ulNodes[i].className="close";
			}
			var oTdNode=node.parentNode;
//			alert(oTdNode.nodeName);
			var oUlNode=oTdNode.getElementsByTagName("ul")[0];
			//alert(oUlNode.nodeName);
			if(oUlNode.className=="open"){
				oUlNode.className="close";
			}else{
				oUlNode.className="open";
			}
			
		}
	</script>
  </head>
  
  <body>
  	<table>
  		<tr>
  			<td>
			  	<a href="javascript:void(0);" οnclick="list(this)">编辑菜单</a>
			    <ul>
				<li>菜单项一</li>
				<li>菜单项二</li>
				<li>菜单项三</li>
				<li>菜单项四</li>
				</ul>
  			</td>
  		</tr>
  		<tr>
  			<td>
			  	<a href="javascript:void(0);" οnclick="list(this)">帮助菜单</a>
			    <ul >
				<li>菜单项一</li>
				<li>菜单项二</li>
				<li>菜单项三</li>
				<li>菜单项四</li>
				</ul>
  			</td>
  		</tr>
  		<tr>
  			<td>
			  	<a href="javascript:void(0);" οnclick="list(this)">文件菜单</a>
			    <ul >
				<li>菜单项一</li>
				<li>菜单项二</li>
				<li>菜单项三</li>
				<li>菜单项四</li>
				</ul>
  			</td>
  		</tr>
	</table>
	<!--<a href="javascript:void(0);">编辑菜单</a>
	<dl style="display:block; font-size:20px;" >
	<dt>菜单项一</dt>
	<dt>菜单项一</dt>
	<dt>菜单项一</dt>
	<dt>菜单项一</dt>
	</dl>
	这是一段注释-->
  </body>
</html>

wangjian_an

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DHTML----菜单项的折叠功能

利用table进行封装，在利用class属性设置开关，设置其ul的disolay属性能不能用，下面是具体代码 /*ul{ //display:none;//块显示 }*/ table{ padding:5px; } table ul{ margin:2px; padding:2px; list-style-type:circ
复制链接

扫一扫

专栏目录