您的位置：首页 > Web前端 > HTML

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

2016-06-17 12:16 507 查看

利用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);" onclick="list(this)">编辑菜单</a>
<ul>
<li>菜单项一</li>
<li>菜单项二</li>
<li>菜单项三</li>
<li>菜单项四</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0);" onclick="list(this)">帮助菜单</a>
<ul >
<li>菜单项一</li>
<li>菜单项二</li>
<li>菜单项三</li>
<li>菜单项四</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0);" onclick="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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航