三级下拉菜单的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 相关文章推荐
event对象的方法 兼容多浏览器
Jun 27 Javascript
让IE8支持DOM 2(不用框架!)
Dec 31 Javascript
IE6不能修改NAME问题的解决方法
Sep 03 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
May 19 Javascript
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
JavaScript实现数字数组正序排列的方法
Apr 06 Javascript
Eclipse引入jquery报错如何解决
Dec 01 Javascript
BootStrap selectpicker后台动态绑定数据
Jun 01 Javascript
jQuery中each方法的使用详解
Mar 18 jQuery
详解vue的diff算法原理
May 20 Javascript
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 Javascript
基于JavaScript获取base64图片大小
Oct 18 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 获取远程文件大小的3种解决方法
2013/07/11 PHP
php的ddos攻击解决方法
2015/01/08 PHP
PHP aes (ecb)解密后乱码问题
2015/06/22 PHP
PHP levenshtein()函数用法讲解
2019/03/08 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
JQuery小知识
2010/10/15 Javascript
基于jquery的复制网页内容到WORD的实现代码
2011/02/16 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
jQuery下拉美化搜索表单效果代码分享
2015/08/25 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
JS中的三个循环小结
2017/06/20 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
React 实现拖拽功能的示例代码
2019/01/06 Javascript
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
Django 全局的static和templates的使用详解
2019/07/19 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
python实现人脸签到系统
2020/04/13 Python
keras 自定义loss层+接受输入实例
2020/06/28 Python
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程
2020/11/02 Python
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
宿舍卫生检讨书
2014/01/16 职场文书
司法建议书范文
2014/05/13 职场文书
学校安全工作汇报材料
2014/08/16 职场文书
党员民主评议自我评价
2014/10/20 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
离婚起诉书怎么写
2015/05/19 职场文书
2015年市场营销工作总结
2015/07/23 职场文书
解析MySQL binlog
2021/06/11 MySQL
Python爬虫入门案例之回车桌面壁纸网美女图片采集
2021/10/16 Python
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript