三级下拉菜单的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 相关文章推荐
multiSteps 基于Jquery的多步骤滑动切换插件
Jul 22 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
Mar 05 Javascript
用JavaScript实现使用鼠标画线的示例代码
Aug 19 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
jQuery中queue()方法用法实例
Dec 29 Javascript
AngularJS入门教程之服务(Service)
Jul 27 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
Oct 26 Javascript
js使用highlight.js高亮你的代码
Aug 18 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
JS实现简单tab选项卡切换
Oct 25 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仿discuz分页效果代码
2008/10/02 PHP
PHP中函数内引用全局变量的方法
2008/10/20 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
PHP加密解密类实例分析
2015/04/20 PHP
yii2 上传图片的示例代码
2018/11/02 PHP
Jquery ui css framework
2010/06/28 Javascript
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
关于javascript event flow 的一个bug详解
2013/09/17 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
利用vue实现模态框组件
2016/12/19 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
2016/12/21 Javascript
javascript学习之json入门
2016/12/22 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
使用ngrok+express解决本地环境中微信接口调试问题
2018/02/26 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
javascript之分片上传,断点续传的实际项目实现详解
2019/09/05 Javascript
星球大战与Python之间的那些事
2016/01/07 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
python 3.6 +pyMysql 操作mysql数据库(实例讲解)
2017/12/20 Python
Flask模拟实现CSRF攻击的方法
2018/07/24 Python
django如何通过类视图使用装饰器
2019/07/24 Python
Python使用sys.exc_info()方法获取异常信息
2020/07/23 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
详解HTML5通讯录获取指定多个人的信息
2016/12/20 HTML / CSS
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
Vuori官网:运动服装的终级表现
2021/01/27 全球购物
一套带网友答案的.NET笔试题
2016/12/06 面试题
高职教师岗位职责
2013/12/24 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
篮球比赛拉拉队口号
2014/06/10 职场文书
社区安全生产月活动总结
2014/07/05 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书