您所在的位置:小祥子 » 编程 » JavaScript » 正文

树型菜单

时间:2015-05-29 编辑:祥龙技术博客园 来源:本站整理

不在大家有没有注意到,我们电脑的每个文件夹就是一个树型菜单,可以有很多下级菜单。

<!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">
li{list-style:none}
</style>
</head>

<body>

<img src="http://www.cnblogs.com/wlx520/p/images/fold.gif" width="16" height="16" /><font style="font-weight:bold">树形菜单:</font>
<!--文学艺术栏目-->
<li  style="margin-left:50px;margin-top:20px"><img src="http://www.cnblogs.com/wlx520/p/images/fclose.gif" width="16" height="18" />文学艺术</li>

<ul id="art" style="display:none">
<li><img src="http://www.cnblogs.com/wlx520/p/images/doc.gif" width="35" height="20" />钢铁是怎么练成的</li>
<li><img src="http://www.cnblogs.com/wlx520/p/images/doc.gif" width="35" height="20" />人的真善美</li>
<li><img src="http://www.cnblogs.com/wlx520/p/images/doc.gif" width="35" height="20" />永远不要放弃自己</li>

</ul>
<!--贴吧专区-->
<li  style="margin-left:50px;margin-top:20px"><img src="http://www.cnblogs.com/wlx520/p/images/fclose.gif" width="16" height="18" />贴吧专区</li>

<ul id="ar" style="display:none">
<li><img src="http://www.cnblogs.com/wlx520/p/images/doc.gif" width="35" height="20" />真我风采</li>
<li><img src="http://www.cnblogs.com/wlx520/p/images/doc.gif" width="35" height="20" />视频贴图</li>
<li><img src="http://www.cnblogs.com/wlx520/p/images/doc.gif" width="35" height="20" />行行摄摄</li>

</ul>
</body>
<script type="text/javascript">
<!--定义文学艺术函数-->
function show( ){
 if(document.getElementById("art").style.display=='block'){
    document.getElementById("art").style.display='none'; 
 }
else{
     document.getElementById("art").style.display='block';  
   }
}
<!--定义贴吧专区函数-->
function show1( ){
 if(document.getElementById("ar").style.display=='block'){
    document.getElementById("ar").style.display='none'; 
 }
else{
     document.getElementById("ar").style.display='block';  
   }
}

</script>
</html>
关键词:菜单

相关文章