三级下拉菜单的js实现代码_导航菜单

三级下拉菜单的实现:

复制代码 代码如下:

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就很好理解了,如果当前被选中菜单展开就隐藏掉,并换掉图标。

复制代码 代码如下:

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为蓝色的正方形
}
}
}

代码说明:只是换掉图标而已,表示激活或失活。

时间: 2024-08-01 23:59:46

三级下拉菜单的js实现代码_导航菜单的相关文章

JavaScript 下拉菜单实现代码_导航菜单

栏目1 栏目1->菜单1 栏目1->菜单2 栏目1->菜单3 栏目1->菜单4 栏目2 栏目2->菜单1 栏目2->菜单2 栏目2->菜单3 栏目2->菜单4 栏目2->菜单5 栏目3 栏目3->菜单1 菜单1->子菜单1 菜单1->子菜单2 菜单1->子菜单3 菜单1->子菜单4 栏目3->菜单2 栏目3->菜单3 菜单3->子菜单1 菜单3->子菜单2 菜单3->子菜单3

JavaScript 双级下拉菜单实现代码_导航菜单

栏目1 栏目2->菜单1 栏目1->菜单2 栏目1->菜单3 栏目1 栏目1->菜单1 栏目1->菜单2 栏目1 栏目1->菜单1 栏目1->菜单2 栏目1->菜单3

js右键菜单效果代码_导航菜单

将以下代码添加到<head>与</head>之间  ----------------------------------  <script language='javascript'>  /*******以下内容可以修改***************/  var mname=new Array(  "首  页",  "修  改",  "下  载",  "删  除",  "新  建&

简单通用的JS滑动门代码_导航菜单

复制代码 代码如下: <UL id=tabMainNav> <LI class=selected id=tab_GameinfoNav onmousemove="show_tab(0)"><SPAN><A id=tab_1 href="#">{$PHPCMS[sitename]}</A></SPAN></LI> <LI id=tab_ShareEmailNav onmousem

js兼容IE6,IE7菜单高亮显示效果代码_导航菜单

CSS导航菜单,三级菜单实现代码_导航菜单

首页 关于我们 公司简介 董事长&总裁 发展历程 公司荣誉 产品&服务 产品1 配套 配件 产品2 产品2-1 产品2-2 服务 服务111 服务112 服务113 服务114 服务115 新闻中心 公告 行业新闻 人力资源 人才战略 社会招聘 公司福利 合作伙伴 伙伴1 伙伴2 伙伴3 联系我们

js仿淘宝的拼音检索特效代码_导航菜单

拼音检索: a Adidas AEE/爱意 AF AF棒球帽 Agatha Albion/奥尔滨 AMD Andox Artini 爱普生 b fasfs fsdfsd c[ch] fasfs fsdfsd fdsfas d fasfs fsdfsd fdsfas fasdffsd e fasfs fsdfsd fdsfas fasdffsd fasdfsaf f jb51.net 脚本 alixixi Fancl Fancl Fancl Fancl Fancl Fancl Fancl Fanc

javascript仿qq界面的折叠菜单实现代码_导航菜单

最近一直在研究网页特效,看到qq界面的折叠菜单,于是冒出个想法,自己写一个类似的,上网查了一下,发现已经有不少类似的菜单效果,不管那么多,先写着再说吧. 以下是html结构: <div id="a"><div id="h1">sdfds</div><div id="b1">dsfdsfsdfsd</div><div id="h2">dsf</div&

可折叠展开的简单目录实现代码_导航菜单

可折叠展开的简单目录 + 主目录1 - 子目录1 - 子目录2 - 子目录3 - 子目录4 + 主目录2 - 子目录1 - 子目录2 - 子目录3 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]