用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 相关文章推荐
JQuery中如何传递参数如click(),change()等具体实现
Apr 28 Javascript
js根据日期判断星座的示例代码
Jan 23 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
Sep 06 Javascript
清除js缓存的多种方法总结
Dec 09 Javascript
JS常见算法详解
Feb 28 Javascript
微信小程序之前台循环数据绑定
Aug 18 Javascript
JavaScript动态绑定详解
Sep 14 Javascript
详解vue-cli3 中跨域解决方案
Apr 10 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
layui form表单提交之后重新加载数据表格的方法
Sep 11 Javascript
Vue将props值实时传递 并可修改的操作
Aug 09 Javascript
node.js 如何监视文件变化
Sep 01 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
php中看实例学正则表达式
2006/12/25 PHP
PHP 文章中的远程图片采集到本地的代码
2009/07/30 PHP
PHP中的string类型使用说明
2010/07/27 PHP
ThinkPHP使用UTFWry地址库进行IP定位实例
2014/04/01 PHP
php计算整个目录大小的方法
2015/06/19 PHP
jqPlot jquery的页面图表绘制工具
2009/07/25 Javascript
js左侧多级菜单动态的解决方案
2010/02/01 Javascript
介绍JavaScript的一个微型模版
2015/06/24 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
jQuery UI Grid 模态框中的表格实例代码
2017/04/01 jQuery
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
使用JS中的Replace()方法遇到的问题小结
2017/10/20 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
javascript中join方法实例讲解
2019/02/21 Javascript
JavaScript中将值转换为字符串的五种方法总结
2019/06/06 Javascript
layui字体图标 loading图标静止不旋转的解决方法
2019/09/23 Javascript
Python中非常实用的一些功能和函数分享
2015/02/14 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
阿里巴巴美国:Alibaba美国
2019/11/24 全球购物
C面试题
2015/10/08 面试题
计算机网络专业推荐信
2013/11/24 职场文书
捐书活动总结
2014/05/04 职场文书
监察建议书格式
2014/05/19 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
入股合作协议书
2014/10/12 职场文书
求职简历自我评价范文
2015/03/10 职场文书
老人节主持词
2015/07/04 职场文书
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android