三级下拉菜单的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 miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
JS实现很实用的对联广告代码(可自适应高度)
Sep 18 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
Nov 21 Javascript
JavaScript数组实现数据结构中的队列与堆栈
May 26 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 Javascript
关于AngularJs数据的本地存储详解
Jan 20 Javascript
基于JS实现翻书效果的页面切换样式
Feb 16 Javascript
js实现自定义进度条效果
Mar 15 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
Jul 19 Javascript
openlayers实现地图弹窗
Sep 25 Javascript
原生JS实现弹幕效果的简单操作指南
Nov 10 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
桌面中心(一)创建数据库
2006/10/09 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
php实现的验证码文件类实例
2015/06/18 PHP
PHP加密技术的简单实现
2016/09/04 PHP
jquery cookie插件代码类
2009/05/26 Javascript
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
2010/11/16 Javascript
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
微信小程序 支付功能实现PHP实例详解
2017/05/12 Javascript
backbone简介_动力节点Java学院整理
2017/07/14 Javascript
vue.js中实现登录控制的方法示例
2018/04/23 Javascript
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
2020/05/18 Javascript
[01:11]steam端dota2实名认证操作流程视频
2021/03/11 DOTA
python 随机数生成的代码的详细分析
2011/05/15 Python
Python实现从订阅源下载图片的方法
2015/03/11 Python
Python if语句知识点用法总结
2018/06/10 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
python实现画图工具
2020/08/27 Python
英国综合网上购物商城:The Hut
2018/07/03 全球购物
木马的传播途径主要有哪些
2016/04/08 面试题
金融专业大学生自我评价
2014/01/09 职场文书
电厂职工自我鉴定
2014/02/20 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
个人四风问题整改措施
2014/10/24 职场文书
2015年考研复习计划
2015/01/19 职场文书
暑期工社会实践报告
2015/07/13 职场文书
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP