三级下拉菜单的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 相关文章推荐
JS模拟的QQ面板上的多级可展开的菜单
Oct 10 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
Java中Timer的用法详解
Oct 21 Javascript
jQuery多个版本和其他js库冲突的解决方法
Aug 11 Javascript
JavaScript中 ES6 generator数据类型详解
Aug 11 Javascript
多种方式实现js图片预览
Dec 12 Javascript
Jquery获取radio选中的值
May 05 jQuery
vue.js获取数据库数据实例代码
May 26 Javascript
Express + Node.js实现登录拦截器的实例代码
Jul 01 Javascript
Angular实现的简单定时器功能示例
Dec 28 Javascript
Fetch超时设置与终止请求详解
May 18 Javascript
基于vuex实现购物车功能
Jan 10 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中autoload的用法总结
2013/11/08 PHP
php实现图片文件与下载文件防盗链的方法
2014/11/03 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
php计算年龄精准到年月日
2015/11/17 PHP
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
加载列表时jquery获取ul中第一个li的属性
2014/11/02 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
2014/11/28 Javascript
简述Jquery与DOM对象
2015/07/10 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
Bootstrap 源代码分析(未完待续)
2016/08/17 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
解决前端跨域问题方案汇总
2016/11/20 Javascript
JavaScript闭包_动力节点Java学院整理
2017/06/27 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
2017/11/27 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
jquery使用FormData实现异步上传文件
2018/10/25 jQuery
vue中组件通信的八种方式(值得收藏!)
2019/08/09 Javascript
python实现多线程的两种方式
2016/05/22 Python
快速了解Python相对导入
2018/01/12 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
解决python写入带有中文的字符到文件错误的问题
2019/01/31 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
Django 开发调试工具 Django-debug-toolbar使用详解
2019/07/23 Python
python通过链接抓取网站详解
2019/11/20 Python
python计算无向图节点度的实例代码
2019/11/22 Python
Python urlopen()和urlretrieve()用法解析
2020/01/07 Python
python集合的新增元素方法整理
2020/12/07 Python
python 爬取腾讯视频评论的实现步骤
2021/02/18 Python
详解python的xlwings库读写excel操作总结
2021/02/26 Python
罗技英国官方网站:Logitech UK
2020/11/03 全球购物
自动化系在校本科生求职信
2013/10/23 职场文书
人力资源管理专业自荐书范文
2014/02/10 职场文书
运动会广播稿50字
2015/08/19 职场文书
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python
python 使用pandas读取csv文件的方法
2022/12/24 Python