三级下拉菜单的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 相关文章推荐
jQuery 使用手册(七)
Sep 23 Javascript
有关DOM元素与事件的3个谜题
Nov 11 Javascript
JavaScript阻止事件冒泡示例分享
Dec 28 Javascript
javascript中call apply 与 bind方法详解
Mar 10 Javascript
学习使用bootstrap3栅格系统
Apr 12 Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 Javascript
node.js入门教程之querystring模块的使用方法
Feb 27 Javascript
解决vue select当前value没有更新到vue对象属性的问题
Aug 30 Javascript
JS中使用new Option()实现时间联动效果
Dec 10 Javascript
生产制造追溯系统之再说条码打印
Jun 03 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
Aug 26 Javascript
Vuex的热更替如何实现
Jun 05 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简单命令代码集锦
2007/09/24 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
JavaScript iframe的相互操作浅析
2009/10/14 Javascript
jquery实现居中弹出层代码
2010/08/25 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
javascript制作网页图片上实现下雨效果
2015/02/26 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
2015/08/21 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
浅谈关于axios和session的一些事
2017/07/13 Javascript
ES6/JavaScript使用技巧分享
2017/12/14 Javascript
5 种JavaScript编码规范
2018/01/30 Javascript
vue实现选项卡及选项卡切换效果
2018/04/24 Javascript
js删除数组中某几项的方法总结
2019/01/16 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
python 中的列表解析和生成表达式
2011/03/10 Python
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
python通过smpt发送邮件的方法
2015/04/30 Python
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
详谈Pandas中iloc和loc以及ix的区别
2018/06/08 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
利用Python对文件夹下图片数据进行批量改名的代码实例
2019/02/21 Python
Python实现实时数据采集新型冠状病毒数据实例
2020/02/04 Python
Python基于requests库爬取网站信息
2020/03/02 Python
幼师专业毕业生自荐信
2013/09/29 职场文书
私用公车造成事故检讨书
2014/11/16 职场文书
2014年中职班主任工作总结
2014/12/16 职场文书
检讨书大全
2015/01/27 职场文书
拾金不昧通报表扬范文
2015/05/05 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书