用JS做的简单的可折叠的两级树形菜单


Posted in Javascript onSeptember 21, 2013
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<hrad> 
<metahttp-equiv="content-type"content="text/html;charset=utf-8"> 
<title>可折叠的两级菜单</title> 
<styletype="text/css"> 
<!-- 
body{ 
background-color:#ffdee0; 
} 
#navigation { 
width:200px; 
font-family:Arial; 
} 
#navigation > ul { 
list-style-type:none; 
margin:0px; 
padding:0px; 
} 
#navigation > ul >li { 
border-bottom:1pxsolid #ED9F9F; 
} 
#navigation > ul >li > a{ 
display:block; 
padding:5px5px 5px 0.5em; 
text-decoration:none; 
border-left:12pxsolid #711515; 
border-right:1pxsolid #711515; 
} 
#navigation > ul >li > a:link, #navigation >ul >li > a:visited{ 
background-color:#c11136; 
color:#FFFFFF; 
} 
#navigation > ul >li > a:hover{ 
background-color:#990020; 
color:#ffff00; 
} 
.txt{ 
background-color:#c11136; 
color:#FFFFFF; 
padding:5px5px 5px 0.5em; 
text-decoration:none; 
border-left:12pxsolid #711515; 
border-right:1pxsolid #711515; 
} /* 子菜单的CSS样式 */ 
#navigation ul li ul{ 
list-style-type:none; 
margin:0px; 
padding:0px0px 0px 0px; 
} 
#navigation ul li ulli{ 
border-top:1pxsolid #ED9F9F; 
} 
#navigation ul li ulli a{ 
display:block; 
padding:3px3px 3px 0.5em; 
text-decoration:none; 
border-left:28pxsolid #a71f1f; 
border-right:1pxsolid #711515; 
} 
#navigation ul li ulli a:link, #navigationul li ul lia:visited{ 
background-color:#e85070; 
color:#FFFFFF; 
} 
#navigation ul li ulli a:hover{ 
background-color:#c2425d; 
color:#ffff00; 
} 
#navigation ul li ul.myHide{ /* 隐藏子菜单 */ 
display:none; 
} 
#navigation ul li ul.myShow{ /* 显示子菜单 */ 
display:block; 
} 
--> 
</style> 
<scriptlanguage="javascript"> 
window.onload=function(){ 
varlistUL=document.getElementById("listUL"); 
varolist=listUL.childNodes; 
varoa=0; 
for(var i = 0; i < olist.length; i++) { 
if(olist[i].tagName=="LI"&&olist[i].getElementsByTagName("ul")[0]){ 
oa=olist[i]; 
oa.onclick=change; 
} 
} 
functionchange(){ 
varos=this.getElementsByTagName("ul")[0]; 
if(os.className=="myHide") 
os.className="myShow"; 
else 
os.className="myHide"; 
} 
} 
</script> 
</hrad> 
<body> 
<divid="navigation"> 
<ulid="listUL"> 
<li> 
<divclass="txt">Home</div> 
</li> 
<li> 
<divclass="txt">news</div> 
<ulclass="myHide"> 
<li><ahref="#">lastest news</a></li> 
<li><ahref="#">all news</a></li> 
</ul> 
</li> 
<li> 
<divclass="txt">sports</div> 
<ulclass="myHide"> 
<li><ahref="#">lastest news</a></li> 
<li><ahref="#">all news</a></li> 
</ul> 
</li> 
<li> 
<divclass="txt">weather</div> 
<ulclass="myHide"> 
<li><ahref="#">lastest news</a></li> 
<li><ahref="#">all news</a></li> 
</ul> 
</li> 
</ul> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
js一组验证函数
Dec 20 Javascript
JavaScript设计模式之适配器模式介绍
Dec 28 Javascript
JavaScript获取页面中第一个锚定文本的方法
Apr 03 Javascript
jQuery中事件与动画的总结分享
May 24 Javascript
JSON与String互转的实现方法(Javascript)
Sep 27 Javascript
微信小程序 网络请求(post请求,get请求)
Jan 17 Javascript
js实现单张图片平移切换效果
Oct 11 Javascript
如何解决.vue文件url引用文件的问题
Jan 18 Javascript
js实现全选反选不选功能代码详解
Apr 24 Javascript
微信小程序实现左滑动删除效果
Mar 30 Javascript
JavaScript对象原型链原理详解
Feb 05 Javascript
React实现评论的添加和删除
Oct 20 Javascript
javascript获得网页窗口实际大小的示例代码
Sep 21 #Javascript
form表单只提交数据而不进行页面跳转的解决方案
Sep 18 #Javascript
JSON传递bool类型数据的处理方式介绍
Sep 18 #Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 #Javascript
jquery 实现密码框的显示与隐藏示例代码
Sep 18 #Javascript
script不刷新页面的联动前后代码
Sep 18 #Javascript
js 中的switch表达式使用示例
Jun 03 #Javascript
You might like
PHPMYADMIN导入数据最大为2M的解决方法
2012/04/23 PHP
PHP实例分享判断客户端是否使用代理服务器及其匿名级别
2014/06/04 PHP
PHP中Laravel 关联查询返回错误id的解决方法
2017/04/01 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
Laravel 实现关系模型取出需要的字段
2019/10/10 PHP
javascript 打印内容方法小结
2009/11/04 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
2015/06/26 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
2015/11/04 Javascript
js实现无缝滚动特效
2015/12/20 Javascript
jquery实现左右无缝轮播图
2020/07/31 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
2016/09/05 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
开发用到的js封装方法(20种)
2018/10/12 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
2019/03/21 Javascript
JS实现随机点名器
2020/04/12 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
[02:54]辉夜杯主赛事第二日败者组 iG.V赛后采访
2015/12/26 DOTA
Python简单计算数组元素平均值的方法示例
2017/12/26 Python
pytorch permute维度转换方法
2018/12/14 Python
Python常见的pandas用法demo示例
2019/03/16 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
python实现简单颜色识别程序
2020/02/19 Python
Python生成随机验证码代码实例解析
2020/06/09 Python
Python reques接口测试框架实现代码
2020/07/28 Python
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
2013/01/23 HTML / CSS
俄罗斯购买内衣网站:Trusiki
2020/08/22 全球购物
村创先争优活动总结
2014/08/28 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
新闻通讯稿范文
2015/07/22 职场文书
4种非常实用的python内置数据结构
2021/04/28 Python
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android