三级下拉菜单的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 相关文章推荐
AngularJS中的模块详解
Jan 29 Javascript
js中不同的height, top的区别对比
Sep 24 Javascript
JQuery实现左右滚动菜单特效
Sep 28 Javascript
异步JS框架的作用以及实现方法
Oct 29 Javascript
详解AngularJS控制器的使用
Mar 09 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
Jun 24 Javascript
jquery实用技巧之输入框提示语句
Jul 28 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
Sep 14 Javascript
详解node字体压缩插件font-spider的用法
Sep 28 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
Oct 12 Javascript
微信小程序实现点击按钮后修改颜色
Dec 05 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
Oct 21 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的简易冒泡法代码分享
2012/08/28 PHP
PHP中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
php利用cookie实现自动登录的方法
2014/12/10 PHP
JavaScript 动态生成方法的例子
2009/07/22 Javascript
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
javascript 判断两个日期之差的示例代码
2015/09/05 Javascript
jquery过滤特殊字符',防sql注入的实现方法
2016/08/17 Javascript
vuex实现简易计数器
2016/10/27 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
详解Vue中一种简易路由传参办法
2017/09/15 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
2018/03/13 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
2018/08/29 Javascript
Koa 使用小技巧(小结)
2018/10/22 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
vue实现树状表格效果
2020/12/29 Vue.js
批量获取及验证HTTP代理的Python脚本
2017/04/23 Python
Python实现树的先序、中序、后序排序算法示例
2017/06/23 Python
python实现画圆功能
2018/01/25 Python
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
python使用response.read()接收json数据的实例
2018/12/19 Python
python实现单链表的方法示例
2019/09/03 Python
python3实现弹弹球小游戏
2019/11/25 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
应聘护理专业毕业自荐书范文
2014/02/12 职场文书
《故乡》教学反思
2014/04/10 职场文书
教师政风行风评议心得体会
2014/10/21 职场文书
警示教育观后感
2015/06/17 职场文书
小学英语新课改心得体会
2016/01/22 职场文书
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏