用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 相关文章推荐
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
Jun 03 Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 Javascript
Perl Substr()函数及函数的应用
Dec 16 Javascript
原生JS实现-星级评分系统的简单实例
Aug 21 Javascript
响应式表格之固定表头的简单实现
Aug 26 Javascript
Javascript中call,apply,bind方法的详解与总结
Dec 12 Javascript
Bootstarp基本模版学习教程
Feb 01 Javascript
详解如何理解vue的key属性
Apr 14 Javascript
基于vue-cli3创建libs库的实现方法
Dec 04 Javascript
微信公众号网页分享功能开发的示例代码
May 27 Javascript
JS实现百度搜索框
Feb 25 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
基于curl数据采集之单页面并行采集函数get_htmls的使用
2013/04/28 PHP
PHP的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
php中字符集转换iconv函数使用总结
2014/10/11 PHP
PHP 读取和编写 XML
2014/11/19 PHP
php获取网页里所有图片并存入数组的方法
2015/04/06 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
基于jQuery实现二级下拉菜单效果
2016/02/01 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
JavaScript如何一次性展示几万条数据
2017/03/30 Javascript
vue路由插件之vue-route
2019/06/13 Javascript
vue组件系列之TagsInput详解
2020/05/14 Javascript
vue3.0生命周期的示例代码
2020/09/24 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
[01:38]完美世界高校联赛决赛花絮
2018/12/02 DOTA
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
详解Python的Django框架中的模版相关知识
2015/07/15 Python
Python中Django 后台自定义表单控件
2017/03/28 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
浅谈PyQt5 的帮助文档查找方法,可以查看每个类的方法
2019/06/25 Python
详解Python二维数组与三维数组切片的方法
2019/07/18 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
详解Python3定时器任务代码
2019/09/23 Python
Python 复平面绘图实例
2019/11/21 Python
python计算二维矩形IOU实例
2020/01/18 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
BNKR中国官网:带你感受澳洲领先潮流时尚
2018/08/21 全球购物
会计自我鉴定
2013/11/02 职场文书
室内设计专业学生的自我评价分享
2013/11/27 职场文书
物流仓管员工作职责
2014/01/06 职场文书
百度吧主申请感言
2014/01/12 职场文书
信息技术培训感言
2014/03/06 职场文书
运输服务质量承诺书
2014/03/27 职场文书