javascript css實(shí)現(xiàn)三級目錄(簡單的)

2020-07-27 13:02:38

字體：大中小

供稿：網(wǎng)友

是在原先的二級目錄改的,先給出演示

這里是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}

目錄是循環(huán)的,我給寫死了.下面給出js

/* 這里是直接寫死了,根據(jù)傳入的id編號,判斷是否顯示,不顯示就顯示 id編號是有規(guī)律的,可用服務(wù)器端語言循環(huán)出目錄 */ 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> <div style="width:200px; border:solid 1px #ccc">   <div   id="iwvjtn8m0"   class="m_menu_title">管理中心</div>  <div   id="iwvjtn8m0"   class="m_menu_content">   <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>  </div> </div>  <script>  /*   這里是直接寫死了,根據(jù)傳入的id編號,判斷是否顯示,不顯示就顯示  id編號是有規(guī)律的,可用服務(wù)器端語言循環(huán)出目錄   */  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 = "";  }  }  >  </script> </body> </html> 
  [Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。

上一篇：asp下sql和access數(shù)據(jù)庫隨機(jī)取10條記錄的代碼newid()

下一篇：使用asp下的adodb.stream 下載文件而不是打開