亚洲一区在线曰日韩在线,欧日韩一区二区三区久久精品

主頁 > 知識庫 > javascript css實現(xiàn)三級目錄(簡單的)

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

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

這里是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="6baxw7b"   class="m_menu_title">管理中心</div> 
 <div   id="02yn777"   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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

python實現(xiàn)樹形打印目錄結(jié)構(gòu)
vuejs使用遞歸組件實現(xiàn)樹形目錄的方法
BootStrap實現(xiàn)樹形目錄組件代碼詳解
Java遍歷輸出指定目錄、樹形結(jié)構(gòu)所有文件包括子目錄下的文件
jquery實現(xiàn)的樹形目錄實例
asp.net 獲取指定文件夾下所有子目錄及文件(樹形)

標(biāo)簽：新鄉(xiāng) 延邊銅川那曲電商邀評優(yōu)質(zhì)小號河池蘇州

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《javascript css實現(xiàn)三級目錄(簡單的)》，本文關(guān)鍵詞 javascript,css,實現(xiàn),三級,目錄,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。