三级下拉菜单的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对象与JSON格式数据相互转换
Feb 20 Javascript
使用jquery读取html5 localstorage的值的方法
Jan 04 Javascript
jquery ajax同步异步的执行最终解决方案
Apr 26 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
Nov 21 Javascript
JS、DOM和JQuery之间的关系示例分析
Apr 09 Javascript
简单几步实现返回顶部效果
Dec 05 Javascript
微信小程序 页面跳转及数据传递详解
Mar 14 Javascript
JS传参及动态修改页面布局
Apr 13 Javascript
bootstrap精简教程_动力节点Java学院整理
Jul 14 Javascript
vue实现移动端input上传视频、音频
Aug 18 Javascript
微信小程序实现点击页面出现文字
Sep 21 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
Nov 09 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批量修改表结构实例
2017/05/24 PHP
PHP laravel中的多对多关系实例详解
2017/06/07 PHP
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
一些老手都不一定知道的JavaScript技巧
2014/05/06 Javascript
JQuery实现动态添加删除评论的方法
2015/05/18 Javascript
浅谈JavaScript中运算符的优先级
2015/07/07 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
2016/10/27 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
2017/04/07 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
2017/08/23 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
Vue中inheritAttrs的使用实例详解
2020/12/31 Vue.js
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
Python简单实现控制电脑的方法
2018/01/22 Python
Python实现发送与接收邮件的方法详解
2018/03/28 Python
python将txt文件读取为字典的示例
2018/12/22 Python
简单了解django orm中介模型
2019/07/30 Python
Python run()函数和start()函数的比较和差别介绍
2020/05/03 Python
pyspark对Mysql数据库进行读写的实现
2020/12/30 Python
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
JS原生实现轮播图的几种方法
2021/03/23 Javascript
信用社主任竞聘演讲稿
2014/05/23 职场文书
广播节目策划方案
2014/05/23 职场文书
反腐倡廉标语
2014/06/24 职场文书
学习十八大的心得体会
2014/09/12 职场文书
工作散漫检讨书
2014/09/16 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
MySQL学习之基础命令实操总结
2022/03/19 MySQL