javascriptcss实现三级目录(简单的)

是在原先的二级目录改的,先给出演示

这里是css

/*bgmacji(http://www.macji.com)*/
ul,li,p{margin:0;padding:0;list-style:none;font-size:12px}
.m_menu_title{height:24px;line-height:24px;text-align:center;margin:01px}
.m_menu_content{border-top:solid1px#ccc;padding:8px2px}

/*一级*/
.m_menu_contentp{height:22px;line-height:22px}
.m_menu_contentpa{
color:#666633;
font-weight:bold;
text-decoration:none;
background:url(http://www.macji.com/blog/img/icon.gif)no-repeat8px4px;
padding:00030px;
display:block
}
.m_menu_contentpa:hover{color:#fe8005;font-weight:bold;text-decoration:none}
.m_menu_contentpa.on{background-position:8px-18px}

/*二级*/
.menu2{}
.menu2li{line-height:22px}
.menu2a{color:#000;
text-decoration:none;
display:block;
padding:00040px;
background:url(http://www.macji.com/blog/img/icon.gif)no-repeat18px4px
}
.menu2a.on{background-position:18px-18px}

/*三级*/
.menu2ul{}
.menu2ula{
background-position:30px-39px;
padding:00050px;
color:#666633;
text-decoration:underline
}
.menu2ula:hover{background-color:#f5f5f5;color:#f60}

目录是循环的,我给写死了.下面给出js

/*
这里是直接写死了,根据传入的id编号,判断是否显示,不显示就显示
id编号是有规律的,可用服务器端语言循环出目录
*/
functionsetMenuList(num){
varp=document.getElementById("p"+num);
varul=document.getElementById("ul"+num);
if(ul.style.display==‘none"){
ul.style.display=”;
p.className=“on”;
}else{
ul.style.display=‘none";
p.className=“”;
}
}

演示查看

简易三级目录演示

<!--
/*bgmaiji(http://www.macji.com)*/
ul,li,p{margin:0;padding:0;list-style:none;font-size:12px}
.m_menu_title{height:24px;line-height:24px;text-align:center;margin:01px}
.m_menu_content{border-top:solid1px#ccc;padding:8px2px}
/*一级*/
.m_menu_contentp{height:22px;line-height:22px}
.m_menu_contentpa{color:#666633;font-weight:bold;text-decoration:none;background:url(http://www.macji.com/blog/img/icon.gif)no-repeat8px4px;padding:00030px;display:block}
.m_menu_contentpa:hover{color:#fe8005;font-weight:bold;text-decoration:none}
.m_menu_contentpa.on{background-position:8px-18px}
/*二级*/
.menu2{}
.menu2li{line-height:22px}
.menu2a{color:#000;text-decoration:none;display:block;padding:00040px;background:url(http://www.macji.com/blog/img/icon.gif)no-repeat18px4px;}
.menu2a.on{background-position:18px-18px}
/*三级*/
.menu2ul{}
.menu2ula{background-position:30px-39px;padding:00050px;color:#666633;text-decoration:underline}
.menu2ula:hover{background-color:#f5f5f5;color:#f60}






管理中心

一级目录(老大)



二级目录(老二)

档案管理
日志管理
相册管理
视频管理
音乐管理
房间管理
物品管理




二级目录(老二)

档案管理
日志管理
相册管理
视频管理
音乐管理
房间管理
物品管理




二级目录(老二)

档案管理
日志管理
相册管理
视频管理
音乐管理
房间管理
物品管理




一级目录2(老大)



二级目录(老二)

档案管理
日志管理
相册管理
视频管理
音乐管理
房间管理
物品管理




二级目录(老二)

档案管理
日志管理
相册管理
视频管理
音乐管理
房间管理
物品管理




二级目录(老二)

档案管理
日志管理
相册管理
视频管理
音乐管理
房间管理
物品管理




一级目录2(老大)



二级目录(老二)

档案管理
日志管理
相册管理
视频管理
音乐管理
房间管理
物品管理




二级目录(老二)

档案管理
日志管理
相册管理
视频管理
音乐管理
房间管理
物品管理




二级目录(老二)

档案管理
日志管理
相册管理
视频管理
音乐管理
房间管理
物品管理




退出



/*

这里是直接写死了,根据传入的id编号,判断是否显示,不显示就显示
id编号是有规律的,可用服务器端语言循环出目录

*/
functionsetMenuList(num){
varp=document.getElementById("p"+num);
varul=document.getElementById("ul"+num);
if(ul.style.display=="none"){
ul.style.display="";
p.className="on";
}else{
ul.style.display="none";
p.className="";
}
}
>



[Ctrl+A全选注:如需引入外部Js需刷新才能执行]