三级下拉菜单的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 获取滚动条位置等信息的函数
Sep 08 Javascript
可自己添加html的伪弹出框实现代码
Sep 08 Javascript
自写的jQuery异步加载数据添加事件
May 15 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
Jan 28 Javascript
深入浅析Extjs中store分组功能的使用方法
Apr 20 Javascript
探讨跨域请求资源的几种方式(总结)
Dec 02 Javascript
JavaScript变量作用域_动力节点Java学院整理
Jun 27 Javascript
vue的基本用法与常见指令
Aug 15 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
使用rollup打包JS的方法步骤
Dec 05 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
Sep 10 Javascript
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
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事务rollback&amp;commit示例
2010/02/08 PHP
php处理文件的小例子(解压缩,删除目录)
2013/02/03 PHP
深入php self与$this的详解
2013/06/08 PHP
php使用反射插入对象示例分享
2014/03/11 PHP
最新制作ThinkPHP3.2.3完全开发手册
2015/11/23 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
JavaScript使用技巧精萃[代码非常实用]
2008/11/21 Javascript
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
VUE实现日历组件功能
2017/03/13 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
详解Vue如何支持JSX语法
2017/11/10 Javascript
Vuex的基本概念、项目搭建以及入坑点
2018/11/04 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
微信小程序实现日历签到
2020/09/21 Javascript
[00:10]DOTA2全国高校联赛 以DOTA2会友
2018/05/30 DOTA
Python多线程和队列操作实例
2015/06/21 Python
Python实现多线程抓取妹子图
2015/08/08 Python
Python 实现选择排序的算法步骤
2018/04/22 Python
在Django中URL正则表达式匹配的方法
2018/12/20 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
使用Python将字符串转换为格式化的日期时间字符串
2019/09/01 Python
基于PyTorch中view的用法说明
2021/03/03 Python
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
淘宝好评语大全
2014/05/05 职场文书
团代会闭幕词
2015/01/28 职场文书
黄石寨导游词
2015/02/05 职场文书
【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN
2022/04/02 DOTA