三级下拉菜单的js实现代码


Posted in Javascript onMay 23, 2011

三级下拉菜单的实现:

function list(idstr){ 
var name1="subtree"+idstr; 
var name2="img"+idstr; 
var objectobj=document.all(name1); 
var imgobj=document.all(name2); 
//alert(imgobj); 
if(objectobj.style.display=="none"){ 
for(i=1;i<22;i++){ 
var name3="img"+i; 
var name="subtree"+i; 
var o=document.all(name); 
if(o!=undefined){ 
o.style.display="none"; 
var image=document.all(name3); 
//alert(image); 
image.src="<%=basePath%>admin/images/ico04.gif"; 
if(idstr>12&&idstr<20){ 
document.getElementById("subtree11").style.display=""; 
document.getElementById("img11").src="<%=basePath%>admin/images/ico03.gif"; 
} 
} 
} 
objectobj.style.display=""; 
imgobj.src="<%=basePath%>admin/images/ico03.gif"; 
} 
else{ 
objectobj.style.display="none"; 
imgobj.src="<%=basePath%>admin/images/ico04.gif"; 
} 
}

代码讲解:如
上,idstr是一个数字字符,用于区别不同的子菜单和图片。通过document.all(name1)拿到所有的id为name1(一变量)的子菜单,这里
其实只有一个,判断如果当前是隐藏状态,则进入循环,又如果元素有定义(为了方便,通过i取到的有些子菜单可能是未定义的)就把所有子菜单隐藏掉(除了1级菜单,包括2、3级菜单)、换掉当前同级菜单图标,最后把当前选中菜单显示出来、换掉当前选中的图标。有种特殊情况:当idstr>12&&idstr<20时候,这时正是第二级菜单激活第三级菜单展开的时候,如下图:选中论文管理,因为成果管理是论文管理的父菜单,成果管理不能隐藏,于是有if(idstr>12&&idstr<20)后面的代码块。最后的else就很好理解了,如果当前被选中菜单展开就隐藏掉,并换掉图标。
三级下拉菜单的js实现代码
function tupian(idt){ 
var nametu="xiaotu"+idt; 
var tp = document.getElementById(nametu); 
tp.src="<%=basePath%>admin/images/ico05.gif";//图片ico05为白色的正方形 
for(var i=1;i<32;i++) 
{ 
var nametu2="xiaotu"+i; 
if(i!=idt*1) 
{ 
var tp2=document.getElementById('xiaotu'+i); 
if(tp2!=undefined) 
{tp2.src="<%=basePath%>admin/images/ico06.gif";}//图片ico06为蓝色的正方形 
} 
} 
}

代码说明:只是换掉图标而已,表示激活或失活。
Javascript 相关文章推荐
DEFER怎么用?
Jul 01 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
Aug 03 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
Apr 03 Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
Feb 28 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
Jul 04 Javascript
AngularJs bootstrap搭载前台框架——基础页面
Sep 01 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
Sep 17 Javascript
JavaScript中cookie工具函数封装的示例代码
Oct 11 Javascript
详解Node.js开发中的express-session
May 19 Javascript
详解JavaScript 为什么要有 Symbol 类型?
Apr 03 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
May 23 #Javascript
在Javascript里访问SharePoint列表数据的实现方法
May 22 #Javascript
SharePoint 客户端对象模型 (一) ECMA Script
May 22 #Javascript
JQuery里选择超链接的实现代码
May 22 #Javascript
改善用户体验的五款jQuery插件分享
May 22 #Javascript
JS 进度条效果实现代码整理
May 21 #Javascript
jquery 使用点滴函数代码
May 20 #Javascript
You might like
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
Javascript实例教程(19) 使用HoTMetal(5)
2006/12/23 Javascript
jquery的map与get方法详解
2013/11/04 Javascript
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
AngularJs Understanding the Controller Component
2016/09/02 Javascript
详解Node.Js如何处理post数据
2016/09/19 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
前端把html表格生成为excel表格的实例
2017/09/19 Javascript
Javascript 之封装(Package)
2018/09/14 Javascript
详解auto-vue-file:一个自动创建vue组件的包
2019/04/26 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
js设置默认时间跨度过程详解
2019/07/17 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python快速排序算法实例分析
2017/11/29 Python
对numpy中轴与维度的理解
2018/04/18 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
Python实现的服务器示例小结【单进程、多进程、多线程、非阻塞式】
2019/05/23 Python
利用anaconda作为python的依赖库管理方法
2019/08/13 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
香港太阳眼镜网上商店:SmartBuyGlasses香港
2016/07/22 全球购物
俄罗斯最大的香水和化妆品网上商店:Randewoo
2020/11/05 全球购物
JSP和EJB可以共享HttpSession么?EJB里面可以改变session里面的内容
2013/06/05 面试题
商务英语专业毕业生自荐信
2013/11/05 职场文书
职业规划书如何设计?
2014/01/09 职场文书
高中同学聚会邀请函
2014/01/11 职场文书
医学生自我鉴定范文
2014/03/26 职场文书
助人为乐好少年事迹材料
2014/08/18 职场文书
工作经常出错的检讨书
2014/09/13 职场文书
演讲稿:​快乐,从不抱怨开始!
2019/04/02 职场文书