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

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

这里是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 = “”;  } }

演示查看

    <title>简易三级目录演示</title>  <!-- /*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}       管理中心     <p><a href="#his" id="p1">一级目录(老大)</a></p>      <ul id="ul1" class="menu2">   <li>    <a href="#his" id="p11">二级目录(老二)</a>    <ul id="ul11">    <li><a href="#this">档案管理</a></li>    <li><a href="#this">日志管理</a></li>    <li><a href="#this">相册管理</a></li>    <li><a href="#this">视频管理</a></li>    <li><a href="#this">音乐管理</a></li>    <li><a href="#this">房间管理</a></li>    <li><a href="#this">物品管理</a></li>    </ul>   </li>      <li>    <a href="#his" id="p12">二级目录(老二)</a>    <ul id="ul12">    <li><a href="#this">档案管理</a></li>    <li><a href="#this">日志管理</a></li>    <li><a href="#this">相册管理</a></li>    <li><a href="#this">视频管理</a></li>    <li><a href="#this">音乐管理</a></li>    <li><a href="#this">房间管理</a></li>    <li><a href="#this">物品管理</a></li>    </ul>   </li>      <li>    <a href="#his" id="p13">二级目录(老二)</a>    <ul id="ul13">    <li><a href="#this">档案管理</a></li>    <li><a href="#this">日志管理</a></li>    <li><a href="#this">相册管理</a></li>    <li><a href="#this">视频管理</a></li>    <li><a href="#this">音乐管理</a></li>    <li><a href="#this">房间管理</a></li>    <li><a href="#this">物品管理</a></li>    </ul>   </li>   </ul>       <p><a href="#his" id="p2">一级目录2(老大)</a></p>      <ul id="ul2" class="menu2">   <li>    <a href="#his" id="p21">二级目录(老二)</a>    <ul id="ul21">    <li><a href="#this">档案管理</a></li>    <li><a href="#this">日志管理</a></li>    <li><a href="#this">相册管理</a></li>    <li><a href="#this">视频管理</a></li>    <li><a href="#this">音乐管理</a></li>    <li><a href="#this">房间管理</a></li>    <li><a href="#this">物品管理</a></li>    </ul>   </li>      <li>    <a href="#his" id="p22">二级目录(老二)</a>    <ul id="ul22">    <li><a href="#this">档案管理</a></li>    <li><a href="#this">日志管理</a></li>    <li><a href="#this">相册管理</a></li>    <li><a href="#this">视频管理</a></li>    <li><a href="#this">音乐管理</a></li>    <li><a href="#this">房间管理</a></li>    <li><a href="#this">物品管理</a></li>    </ul>   </li>      <li>    <a href="#his" id="p23">二级目录(老二)</a>    <ul id="ul23">    <li><a href="#this">档案管理</a></li>    <li><a href="#this">日志管理</a></li>    <li><a href="#this">相册管理</a></li>    <li><a href="#this">视频管理</a></li>    <li><a href="#this">音乐管理</a></li>    <li><a href="#this">房间管理</a></li>    <li><a href="#this">物品管理</a></li>    </ul>   </li>   </ul>     <p><a href="#his" id="p3">一级目录2(老大)</a></p>      <ul id="ul3" class="menu2">   <li>    <a href="#his" id="p31">二级目录(老二)</a>    <ul id="ul31">    <li><a href="#this">档案管理</a></li>    <li><a href="#this">日志管理</a></li>    <li><a href="#this">相册管理</a></li>    <li><a href="#this">视频管理</a></li>    <li><a href="#this">音乐管理</a></li>    <li><a href="#this">房间管理</a></li>    <li><a href="#this">物品管理</a></li>    </ul>   </li>      <li>    <a href="#his" id="p32">二级目录(老二)</a>    <ul id="ul32">    <li><a href="#this">档案管理</a></li>    <li><a href="#this">日志管理</a></li>    <li><a href="#this">相册管理</a></li>    <li><a href="#this">视频管理</a></li>    <li><a href="#this">音乐管理</a></li>    <li><a href="#this">房间管理</a></li>    <li><a href="#this">物品管理</a></li>    </ul>   </li>      <li>    <a href="#his" id="p33">二级目录(老二)</a>    <ul id="ul33">    <li><a href="#this">档案管理</a></li>    <li><a href="#this">日志管理</a></li>    <li><a href="#this">相册管理</a></li>    <li><a href="#this">视频管理</a></li>    <li><a href="#this">音乐管理</a></li>    <li><a href="#this">房间管理</a></li>    <li><a href="#this">物品管理</a></li>    </ul>   </li>   </ul>        <p><a href="#his" class="on">退出</a></p>       /*   这里是直接写死了,根据传入的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 = "";  }  }  >     
  [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

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