三级下拉菜单的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 相关文章推荐
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
Oct 29 Javascript
JavaScript 替换Html标签实现代码
Oct 14 Javascript
javascript匿名函数应用示例介绍
Mar 07 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
Aug 10 Javascript
JS之相等操作符详解
Sep 13 Javascript
vue.js学习之递归组件
Dec 13 Javascript
vue微信分享 vue实现当前页面分享其他页面
Dec 02 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
Vue使用NPM方式搭建项目
Oct 25 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
如何用Node.js编写内存效率高的应用程序
Apr 30 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
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
jQuery 使用手册(四)
2009/09/23 Javascript
javascript中常用编程知识
2013/04/08 Javascript
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
2015/05/12 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
jQuery鼠标事件汇总
2015/08/30 Javascript
详解JavaScript函数
2015/12/01 Javascript
js中遍历对象的属性和值的方法
2016/07/27 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
2019/09/27 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
2020/08/14 Javascript
JavaScript实现表单验证功能
2020/12/09 Javascript
python获得linux下所有挂载点(mount points)的方法
2015/04/29 Python
Python基于win32ui模块创建弹出式菜单示例
2018/05/09 Python
PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上
2019/04/01 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
解决python运行启动报错问题
2020/06/01 Python
python matlab库简单用法讲解
2020/12/31 Python
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
阿迪达斯荷兰官方网站:adidas荷兰
2018/03/16 全球购物
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
Book Depository美国:全球领先的专业网上书店之一
2019/08/14 全球购物
八年级历史教学反思
2014/01/10 职场文书
办理信用卡收入证明范例
2014/09/13 职场文书
党员查摆四风问题思想汇报
2014/10/25 职场文书
工程主管竞聘书
2015/09/15 职场文书
导游词之苏州盘门景区
2019/11/12 职场文书
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers
css清除浮动clearfix:after的用法详解(附完整代码)
2023/05/21 HTML / CSS