三级下拉菜单的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 Global对象
Aug 13 Javascript
JavaScript利用append添加元素报错的解决方法
Jul 01 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
Mar 27 Javascript
JS实现向表格行添加新单元格的方法
Mar 30 Javascript
javascript遇到html5的一些表单属性
Jul 05 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
Jan 14 Javascript
实例详解ECMAScript5中新增的Array方法
Apr 05 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
Dec 01 Javascript
canvas时钟效果
Feb 16 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
JS原型继承四步曲及原型继承图一览
Nov 28 Javascript
在vue中配置不同的代理同时访问不同的后台操作
Sep 11 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中将ip地址转成十进制数的两种实用方法
2013/08/15 PHP
PHP把空格、换行符、中文逗号等替换成英文逗号的正则表达式
2014/05/04 PHP
Symfony2框架创建项目与模板设置实例详解
2016/03/17 PHP
thinkPHP3.2.3结合Laypage实现的分页功能示例
2018/05/28 PHP
用php实现分页效果的示例代码
2020/12/10 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
jQuery验证插件 Validate详解
2014/11/20 Javascript
原生javascript获取元素样式
2014/12/31 Javascript
学习javascript面向对象 理解javascript对象
2016/01/04 Javascript
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
ES6实现的遍历目录函数示例
2017/04/07 Javascript
用JS实现简单的登录验证功能
2017/07/28 Javascript
Angular4 Select选择改变事件的方法
2018/10/09 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
原生js实现表格翻页和跳转
2020/09/29 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
2020/12/14 Vue.js
全面解析js中的原型,原型对象,原型链
2021/01/25 Javascript
利用python获得时间的实例说明
2013/03/25 Python
Python遍历numpy数组的实例
2018/04/04 Python
Python返回数组/List长度的实例
2018/06/23 Python
解决python测试opencv时imread导致的错误问题
2019/01/26 Python
Python交互式图形编程的实现
2019/07/25 Python
Python实现决策树并且使用Graphviz可视化的例子
2019/08/09 Python
基于Python的图像数据增强Data Augmentation解析
2019/08/13 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
使用HTML5的表单验证的简单示例
2015/09/09 HTML / CSS
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
关于圣诞节的广播稿
2014/01/26 职场文书
低碳生活倡议书
2014/04/14 职场文书