三级下拉菜单的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复选框CHECKBOX全选、反选
Aug 30 Javascript
JavaScript 基础知识 被自己遗忘的
Oct 15 Javascript
利用jQuery操作对象数组的实现代码
Apr 27 Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 Javascript
js跨域请求数据的3种常用的方法
Dec 01 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
Apr 12 Javascript
完美JQuery图片切换效果的简单实现
Jul 21 Javascript
js实现定时进度条完成后切换图片
Jan 04 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
Jul 05 Javascript
详解微信小程序图片地扯转base64解决方案
Aug 18 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
Apache2 httpd.conf 中文版
2006/11/17 PHP
解析使用ThinkPHP应该掌握的调试手段
2013/06/20 PHP
PHP之uniqid()函数用法
2014/11/03 PHP
PHP封装cURL工具类与应用示例
2019/07/01 PHP
基于jquery的图片懒加载js
2010/06/30 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
nodejs中exports与module.exports的区别详细介绍
2013/01/14 NodeJs
不使用jquery实现js打字效果示例分享
2014/01/19 Javascript
JS鼠标拖拽实例分析
2015/11/23 Javascript
浅谈jquery点击label触发2次的问题
2016/06/12 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
Bootstarp 基础教程之表单部分实例代码
2017/02/03 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
Angular 4环境准备与Angular cli创建项目详解
2017/05/27 Javascript
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
浅谈express.js框架中间件(middleware)
2019/04/07 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
Python 登录网站详解及实例
2017/04/11 Python
Django实现简单分页功能的方法详解
2017/12/05 Python
Python实现字符串匹配的KMP算法
2019/04/04 Python
python爬虫 Pyppeteer使用方法解析
2019/09/28 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
flask框架中的cookie和session使用
2021/01/31 Python
video实现有声音自动播放的实现方法
2020/05/20 HTML / CSS
LUISAVIAROMA中国官网:时尚奢侈品牌购物网站
2020/11/01 全球购物
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
2019年七夕情人节浪漫祝福语大全!
2019/08/08 职场文书
浅谈Redis位图(Bitmap)及Redis二进制中的问题
2021/07/15 Redis
教你如何用cmd快速登录服务器
2022/06/10 Servers