DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS實現無限級網頁折疊菜單(類似樹形菜單)效果代碼
JS實現無限級網頁折疊菜單(類似樹形菜單)效果代碼
編輯：關於JavaScript     

本文實例講述了JS實現無限級網頁折疊菜單(類似樹形菜單)效果代碼。分享給大家供大家參考。具體如下：

這是一款超不錯的網頁折疊菜單，采用JavaScript實現。折疊菜單是大家比較常見到的一種菜單形式，可廣泛應用於管理系統、後台左側、產品列表中，本折疊菜單有點樹形菜單的味道，相信“無限級”會滿足你的要求。

運行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/js-unlimit-fade-in-out-tree-menu-codes/

具體代碼如下：

<html>
<head>
<title>無限級折疊菜單JS版</title>
<style> 
<!--
body,ul,h3 {margin:0px; padding:0px;}
li {list-style-type:none;}
body{
 font-size:12px;
 color:#333; 
 font-family: Simsun;
 line-height:15px;
 }
a{text-decoration:none;color:#004285;border:none;}
a:hover{text-decoration:none;color:#C33;}
#menu {
 width:260px;
 margin:50px auto; 
 padding:10px; 
 border:#EEE 1px solid;
 }
 #menu h3 {
 font-size:12px;
 }
 #menu ul { 
 background:url("images/ul-bg.gif") repeat-y 5px 0px; overflow:hidden;
 }
 #menu ul li {
 padding:5px 0 2px 15px; 
 background:url("images/tree-ul-li.gif") no-repeat 5px -32px; 
 }
 #menu ul li ul {display:none;}
 #menu ul li em {
 cursor:pointer;
 display:inline-block;
 width:15px;
 float:left;
 height:15px;
 margin-left:-14px;
 background:url("images/tree-ul-li.gif") no-repeat -32px 2px;
 }
 #menu ul li em.off {
 background-position: -17px -18px;
 }
 #menu ul li#end {
 background-color:#FFF;
 }
 #menu ul.off { 
 display:block;
 }
-->
</style>
</head>
<body>
<div id="menu">
 <h3>無限級折疊菜單JavaScript版</h3>
 <ul>
 <li><em></em><a href='javascript:void(0);'>菜單_1_1</a>
 <ul>
  <li><em></em><a href='javascript:void(0);'>菜單_2_1</a>
  <ul>
  <li><em></em><a href='javascript:void(0);'>菜單_3_1</a>
  <ul>
   <li><em></em><a href='javascript:void(0);'>菜單_4_1</a>
   <ul>
   <li><a href='javascript:void(0);'>菜單_5_1</a></li>
   <li id='end'><a href='javascript:void(0);'>菜單_5_2</a></li>
   </ul>
   </li>
   <li id='end'><em></em><a href='javascript:void(0);'>菜單_4_2</a>
   <ul>
   <li><a href='javascript:void(0);'>菜單_5_1</a></li>
   <li id='end'><a href='javascript:void(0);'>菜單_5_2</a></li>
   </ul>
   </li>
  </ul>
  </li>
  <li id='end'><em></em><a href='javascript:void(0);'>菜單_3_2</a>
  <ul>
   <li><em></em><a href='javascript:void(0);'>菜單_4_1</a>
   <ul>
   <li><a href='javascript:void(0);'>菜單_5_1</a></li>
   <li id='end'><a href='javascript:void(0);'>菜單_5_2</a></li>
   </ul>
   </li>
   <li id='end'><em></em><a href='javascript:void(0);'>菜單_4_2</a>
   <ul>
   <li><a href='javascript:void(0);'>菜單_5_1</a></li>
   <li id='end'><a href='javascript:void(0);'>菜單_5_2</a></li>
   </ul>
   </li>
  </ul>
  </li>
  </ul>
  </li>
  <li id='end'><em></em><a href='javascript:void(0);'>菜單_2_2</a>
  <ul>
  <li><em></em><a href='javascript:void(0);'>菜單_3_1</a>
  <ul>
   <li><em></em><a href='javascript:void(0);'>菜單_4_1</a>
   <ul>
   <li><a href='javascript:void(0);'>菜單_5_1</a></li>
   <li id='end'><a href='javascript:void(0);'>菜單_5_2</a></li>
   </ul>
   </li>
   <li id='end'><em></em><a href='javascript:void(0);'>菜單_4_2</a>
   <ul>
   <li><a href='javascript:void(0);'>菜單_5_1</a></li>
   <li id='end'><a href='javascript:void(0);'>菜單_5_2</a></li>
   </ul>
   </li>
  </ul>
  </li>
  <li id='end'><em></em><a href='javascript:void(0);'>菜單_3_2</a>
  <ul>
   <li><em></em><a href='javascript:void(0);'>菜單_4_1</a>
   <ul>
   <li><a href='javascript:void(0);'>菜單_5_1</a></li>
   <li id='end'><a href='javascript:void(0);'>菜單_5_2</a></li>
   </ul>
   </li>
   <li id='end'><em></em><a href='javascript:void(0);'>菜單_4_2</a>
   <ul>
   <li><a href='javascript:void(0);'>菜單_5_1</a></li>
   <li id='end'><a href='javascript:void(0);'>菜單_5_2</a></li>
   </ul>
   </li>
  </ul>
  </li>
  </ul>
  </li>
 </ul>
 </li>
 <li id='end'><em></em><a href='javascript:void(0);'>菜單_1_2</a>
 <ul>
  <li><em></em><a href='javascript:void(0);'>菜單_2_1</a>
  <ul>
  <li><em></em><a href='javascript:void(0);'>菜單_3_1</a>
  <ul>
   <li><em></em><a href='javascript:void(0);'>菜單_4_1</a>
   <ul>
   <li><a href='javascript:void(0);'>菜單_5_1</a></li>
   <li id='end'><a href='javascript:void(0);'>菜單_5_2</a></li>
   </ul>
   </li>
   <li id='end'><em></em><a href='javascript:void(0);'>菜單_4_2</a>
   <ul>
   <li><a href='javascript:void(0);'>菜單_5_1</a></li>
   <li id='end'><a href='javascript:void(0);'>菜單_5_2</a></li>
   </ul>
   </li>
  </ul>
  </li>
  <li id='end'><em></em><a href='javascript:void(0);'>菜單_3_2</a>
  <ul>
   <li><em></em><a href='javascript:void(0);'>菜單_4_1</a>
   <ul>
   <li><a href='javascript:void(0);'>菜單_5_1</a></li>
   <li id='end'><a href='javascript:void(0);'>菜單_5_2</a></li>
   </ul>
   </li>
   <li id='end'><em></em><a href='javascript:void(0);'>菜單_4_2</a>
   <ul>
   <li><a href='javascript:void(0);'>菜單_5_1</a></li>
   <li id='end'><a href='javascript:void(0);'>菜單_5_2</a></li>
   </ul>
   </li>
  </ul>
  </li>
  </ul>
  </li>
  <li id='end'><em></em><a href='javascript:void(0);'>菜單_2_2</a>
  <ul>
  <li><em></em><a href='javascript:void(0);'>菜單_3_1</a>
  <ul>
   <li><em></em><a href='javascript:void(0);'>菜單_4_1</a>
   <ul>
   <li><a href='javascript:void(0);'>菜單_5_1</a></li>
   <li id='end'><a href='javascript:void(0);'>菜單_5_2</a></li>
   </ul>
   </li>
   <li id='end'><em></em><a href='javascript:void(0);'>菜單_4_2</a>
   <ul>
   <li><a href='javascript:void(0);'>菜單_5_1</a></li>
   <li id='end'><a href='javascript:void(0);'>菜單_5_2</a></li>
   </ul>
   </li>
  </ul>
  </li>
  <li id='end'><em></em><a href='javascript:void(0);'>菜單_3_2</a>
  <ul>
   <li><em></em><a href='javascript:void(0);'>菜單_4_1</a>
   <ul>
   <li><a href='javascript:void(0);'>菜單_5_1</a></li>
   <li id='end'><a href='javascript:void(0);'>菜單_5_2</a></li>
   </ul>
   </li>
   <li id='end'><em></em><a href='javascript:void(0);'>菜單_4_2</a>
   <ul>
   <li><a href='javascript:void(0);'>菜單_5_1</a></li>
   <li id='end'><a href='javascript:void(0);'>菜單_5_2</a></li>
   </ul>
   </li>
  </ul>
  </li>
  </ul>
  </li>
 </ul>
 </li>
 </ul>
</div>
<script type="text/javascript"> 
(function(e){
 for(var _obj=document.getElementById(e.id).getElementsByTagName(e.tag),i=-1,em;em=_obj[++i];){
 em.onclick = function(){ //onmouseover
  var ul = this.nextSibling;
  if(!ul){return false;}
  ul = ul.nextSibling; if(!ul){return false;} 
  if(e.tag != 'a'){ ul = ul.nextSibling; if(!ul){return false;} } //a 標簽控制 隱藏或刪除該行
  for(var _li=this.parentNode.parentNode.childNodes,n=-1,li;li=_li[++n];){
  if(li.tagName=="LI"){
   for(var _ul=li.childNodes,t=-1,$ul;$ul=_ul[++t];){
   switch($ul.tagName){
   case "UL":
    $ul.className = $ul!=ul?"" : ul.className?"":"off";
   break;
   case "EM":
    $ul.className = $ul!=this?"" : this.className?"":"off";
   break;
   }
   }
  }
  }
 }
 }
})({id:'menu',tag:'em'});
</script>
</body>
</html>

希望本文所述對大家的JavaScript程序設計有所幫助。

關於JavaScript
原生js配合cookie制作保存路徑的拖拽
主要是運用了原生js封裝了一個cookie，然後使用了三個事件做拖拽，分別是onmousedown，
網頁圖片居中:商品圖片的自適應居中的方法
前幾天在做騰訊微博的微賣場的時候，遇到需要做圖片居中的需求。也就是說，商品列表中的圖片需要居中顯示。
解決JS腳本兼容的幾個小技巧
1.使用HTML注釋掉腳本關於兼容性我們第一個要考慮的問題應該是運行的平台是否支持客戶端腳本？通常的

相關文章

JavaScript基礎知識JSON基礎正則表達式關於JavaScriptJavaScript技巧jQuery入門知識AJAX入門JavaScript綜合知識
小編推薦
js實現刷新頁面後回到記錄時滾動條的位置【兩種方案可選】 JavaScript日期時間與時間戳的轉換函數分享 js事件冒泡實例分享(已測試) 圖文詳解JavaScript的原型對象及原型鏈 Json字符串轉換為JS對象的高效方法實例 js調試工具Console命令詳解 Bootstrap模仿起筷首頁效果 JavaScript(JS) 壓縮 / 混淆 / 格式化 批處理工具 SharePoint 客戶端對象模型 (一) ECMA Script js使用正則實現ReplaceAll全部替換的方法教程
熱門推薦
javascript常用函數歸納整理 JS中prototype關鍵字的功能介紹及使用示例 javascript與CSS復習（《精通javascript》） Windows8下搭建Node.js開發環境教程 jQuery表格插件datatables用法匯總 JavaScript動態改變HTML頁面元素例如添加或刪除 JavaScript中的16進制字符(改進) 純javascript實現四方向文本無縫滾動效果 HTML5 Shiv完美解決IE(IE6/IE7/IE8)不兼容HTML5標簽的方法
大家都在看
交互設計的漸進展開:使產品簡約，操作邏輯清晰 在JS中操作時間之getUTCMilliseconds()方法的使用 jQuery.fakeFile插件:網站上傳控件 JavaScript Math.ceil() 函數使用介紹 刷新頁面時 select值保持不變 HTML5+CSS3網頁布局實例：創建高效的WEB頁面 簡單理清一下proto與prototype 整理關於Bootstrap列表組的慕課筆記
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved