javascript css实现三级目录(简单的)

网络编程 2024/11/16 佚名

3 2 1

无为清净楼资源网 Design By www.qnjia.com

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

这里是css

/*bg macji(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:0 1px} 
.m_menu_content{border-top:solid 1px #ccc;padding:8px 2px} 

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

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

/*三级*/ 
.menu2 ul{} 
.menu2 ul a{ 
 background-position:30px -39px; 
 padding:0 0 0 50px; 
 color:#666633; 
 text-decoration:underline 
} 
.menu2 ul a:hover{background-color:#f5f5f5; color:#f60}

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

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

演示查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>简易三级目录演示</title> 
<style> 
<!-- 
/*bg maiji(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:0 1px} 
.m_menu_content{border-top:solid 1px #ccc;padding:8px 2px} 
/*一级*/ 
.m_menu_content p{height:22px;line-height:22px} 
.m_menu_content p a{color:#666633;font-weight:bold;text-decoration:none;background:url(http://www.macji.com/blog/img/icon.gif) no-repeat 8px 4px;padding:0 0 0 30px;display:block} 
.m_menu_content p a:hover{color:#fe8005;font-weight:bold;text-decoration:none} 
.m_menu_content p a.on{background-position:8px -18px} 
/*二级*/ 
.menu2{} 
.menu2 li{line-height:22px} 
.menu2 a{color:#000; text-decoration:none; display:block; padding:0 0 0 40px; background:url(http://www.macji.com/blog/img/icon.gif) no-repeat 18px 4px;} 
.menu2 a.on{background-position:18px -18px} 
/*三级*/ 
.menu2 ul{} 
.menu2 ul a{background-position:30px -39px; padding:0 0 0 50px; color:#666633; text-decoration:underline} 
.menu2 ul a:hover{background-color:#f5f5f5; color:#f60} 

</style> 
</head> 

<body> 
 
  管理中心 
  
  <p>一级目录(老大)</p> 
  
   <ul id="ul1" class="menu2" style="display:none"> 
  <li> 
   二级目录(老二) 
   <ul id="ul11" style="display:none"> 
   <li>档案管理</li> 
   <li>日志管理</li> 
   <li>相册管理</li> 
   <li>视频管理</li> 
   <li>音乐管理</li> 
   <li>房间管理</li> 
   <li>物品管理</li> 
   </ul> 
  </li> 
   
  <li> 
   二级目录(老二) 
   <ul id="ul12" style="display:none"> 
   <li>档案管理</li> 
   <li>日志管理</li> 
   <li>相册管理</li> 
   <li>视频管理</li> 
   <li>音乐管理</li> 
   <li>房间管理</li> 
   <li>物品管理</li> 
   </ul> 
  </li> 
   
  <li> 
   二级目录(老二) 
   <ul id="ul13" style="display:none"> 
   <li>档案管理</li> 
   <li>日志管理</li> 
   <li>相册管理</li> 
   <li>视频管理</li> 
   <li>音乐管理</li> 
   <li>房间管理</li> 
   <li>物品管理</li> 
   </ul> 
  </li> 
  </ul>   
  
  <p>一级目录2(老大)</p> 
  
   <ul id="ul2" class="menu2" style="display:none"> 
  <li> 
   二级目录(老二) 
   <ul id="ul21" style="display:none"> 
   <li>档案管理</li> 
   <li>日志管理</li> 
   <li>相册管理</li> 
   <li>视频管理</li> 
   <li>音乐管理</li> 
   <li>房间管理</li> 
   <li>物品管理</li> 
   </ul> 
  </li> 
   
  <li> 
   二级目录(老二) 
   <ul id="ul22" style="display:none"> 
   <li>档案管理</li> 
   <li>日志管理</li> 
   <li>相册管理</li> 
   <li>视频管理</li> 
   <li>音乐管理</li> 
   <li>房间管理</li> 
   <li>物品管理</li> 
   </ul> 
  </li> 
   
  <li> 
   二级目录(老二) 
   <ul id="ul23" style="display:none"> 
   <li>档案管理</li> 
   <li>日志管理</li> 
   <li>相册管理</li> 
   <li>视频管理</li> 
   <li>音乐管理</li> 
   <li>房间管理</li> 
   <li>物品管理</li> 
   </ul> 
  </li> 
  </ul> 
  
  <p>一级目录2(老大)</p> 
  
   <ul id="ul3" class="menu2" style="display:none"> 
  <li> 
   二级目录(老二) 
   <ul id="ul31" style="display:none"> 
   <li>档案管理</li> 
   <li>日志管理</li> 
   <li>相册管理</li> 
   <li>视频管理</li> 
   <li>音乐管理</li> 
   <li>房间管理</li> 
   <li>物品管理</li> 
   </ul> 
  </li> 
   
  <li> 
   二级目录(老二) 
   <ul id="ul32" style="display:none"> 
   <li>档案管理</li> 
   <li>日志管理</li> 
   <li>相册管理</li> 
   <li>视频管理</li> 
   <li>音乐管理</li> 
   <li>房间管理</li> 
   <li>物品管理</li> 
   </ul> 
  </li> 
   
  <li> 
   二级目录(老二) 
   <ul id="ul33" style="display:none"> 
   <li>档案管理</li> 
   <li>日志管理</li> 
   <li>相册管理</li> 
   <li>视频管理</li> 
   <li>音乐管理</li> 
   <li>房间管理</li> 
   <li>物品管理</li> 
   </ul> 
  </li> 
  </ul> 
     
  <p>退出</p> 
  
 
  
</body> 
</html> 

  [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

javascript,css,三级目录

标签：

javascript,css,三级目录

无为清净楼资源网 Design By www.qnjia.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

无为清净楼资源网 Design By www.qnjia.com

评论“javascript css实现三级目录(简单的)”

暂无评论...

www.qnjia.com 无为清净楼资源网

139,976互联网资源

144,792高清电影

21,817无损音乐

631,128技术资源

javascript css实现三级目录(简单的)

javascript,css,三级目录

asp下sql和access数据库随机取10条记录的代码newid()

使用asp下的adodb.stream 下载文件而不是打开

评论“javascript css实现三级目录(简单的)”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

javascript css实现三级目录(简单的)

javascript,css,三级目录

asp下sql和access数据库随机取10条记录的代码newid()

使用asp下的adodb.stream 下载文件而不是打开

评论“javascript css实现三级目录(简单的)”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存