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

首页 > 网络编程 > JavaScript > 网页特效 > 导航菜单 更新日期: 2016-03-08
纯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就很好理解了,如果当前被选中菜单展开就隐藏掉,并换掉图标。
三级下拉菜单的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为蓝色的正方形
}
}
}

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

> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • 一个日期下拉菜单的js实现代码
    一个日期下拉菜单的js实现代码
    用js实现的日期下拉菜单效果代码,用js主要是方便控制,不需要输入很多的菜单1.先看效果图: 2.js代码 year_month_day.js 如需引入外部Js需刷新才能执行]
  • js模拟select下拉菜单控件的代码
    js模拟select下拉菜单控件的代码,需要的朋友可以参考一下 代码如下:<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <me ...
  • ASP模仿googlesuggest风格实现下拉菜单效果
    这篇文章主要介绍了ASP模仿google suggest风格实现下拉菜单效果,需要的朋友可以参考下今天和大家一起利用ASP模仿实现google suggest风格的下拉菜单,直接上代码 1.前台代码: <%@LANGUAGE="JAVASCRIPT" CODEPAGE="936"%> <!DOCTYP ...
  • javascript实现控制的多级下拉菜单
    javascript实现控制的多级下拉菜单
    这篇文章主要介绍了javascript实现控制的多级下拉菜单,包含示例代码,效果非常不错,这里推荐给大家.最近身体不适,所以没能如期的更新,抱歉.这里直接把代码贴上,如果有不明白的地方,留言就行. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
  • asp.netDropDownList三级联动下拉菜单实现代码
    asp.net DropDownList 三级联动下拉菜单效果代码,需要的朋友可以参考下. 代码如下: if (!IsPostBack) { //一级分类列表 this.DropDownList1.DataSource = dsbb.SelectSubjct1(); this.DropDownList1.DataTextField = "cName ...
猜你喜欢