這篇文章主要介紹了JSON無限折疊菜單編寫實例，有需要的朋友可以參考一下
最近看了一篇關於JSON無限折疊菜單的文章 感覺寫的不錯，也研究了下代碼，所以用自己編碼方式也做了個demo 其實這樣的菜單項在我們網站上或者項目導航菜單項很常見的一種效果，特別是在一些電子商務網上上左側有分類是很常見的 或者說導航菜單有下拉效果也是很常見的，但是他們都是做死的 也就是頁面上代碼直接寫死的 然後實現那種下拉效果 而今天我們是通過JSON格式來自動生成的，或者可以說 要做這種折疊菜單效果 只需要開發人員提供我們前端開發這種JSON格式或者我們前端可以定這樣的格式也就ok了 其他的都可以直接引用這個代碼進去。下面給大家來分享下我的JS代碼！ 下面我們來看看JSON個格式是個什麼樣的 格式如下： 碼 代碼如下: var testMenu=[ { "name": "一級菜單", "submenu": [ { "name": "二級菜單", "url": "" }, { "name": "二級菜單", "url": "" } ] }, { "name": "一級菜單", "submenu": [ { "name": "二級菜單", "url": "" }, { "name": "二級菜單", "submenu": [ { "name": "三級菜單", "submenu": [ { "name": "四級菜單", "url": "" } ] }, { "name": "三級菜單", "url": "" } ] }, { "name": "二級菜單", "url": "" }, { "name": "二級菜單", "submenu": [ { "name": "三級菜單", "submenu": [ { "name": "四級菜單", "url": "" }, { "name": "四級菜單", "submenu": [ { "name": "五級菜單", "url": "" }, { "name": "五級菜單", "url": "" } ] } ] }, { "name": "三級菜單", "url": "" } ] }, { "name": "二級菜單", "url": "" } ] }, { "name": "一級菜單", "submenu": [ { "name": "二級菜單", "url": "" }, { "name": "二級菜單", "url": "" }, { "name": "二級菜單", "url": "" } ] } ]; 只要這種JSON格式就ok了 且上面的參數名 name submenu url是叫這樣的名字就可以了 ，然後直接可以在頁面HTML如下： 復制代碼 代碼如下: <div class="wrap-menu"></div> CSS代碼如下： 代碼如下: <style type="text/css"> .wrap-menu { overflow:auto; width:300px; background:#F6F6F6; font:12px/1.5 Tahoma,Arial,sans-serif} .wrap-menu ul{ list-style:none; margin:0; padding:0;} .wrap-menu ul li{ text-indent:3em; white-space:nowrap; } .wrap-menu ul li h2{ cursor:pointer; height:100%; width:100%; margin:0 0 1px 0; font:12px/31px '宋體'; color:#fff; background:red;} .wrap-menu ul li a{ display:block; outline:none; height:25px; line-height:25px; margin:1px 0; color:#1A385C; text-decoration:none;} .wrap-menu ul li img{ margin-right:10px; margin-left:-17px; margin-top:9px; width:7px; height:7px; background:url(images/arrow.gif) no-repeat; border:none;} .wrap-menu ul li img.unfold{ background-position:0 -9px;} .wrap-menu ul li a:hover{ background-color:#ccc; background-image:none;} </style> css樣式可以自己下 沒有關系！ JS代碼如下： 代碼如下: /** * JSON無限折疊菜單 * @constructor {AccordionMenu} * @param {options} 對象 * @date 2013-12-13 * @author tugenhua * @email [email protected] */ function AccordionMenu(options) { this.config = { containerCls : '.wrap-menu', // 外層容器 menuArrs : '', // JSON傳進來的數據 type : 'click', // 默認為click 也可以mouseover renderCallBack : null, // 渲染html結構後回調 clickItemCallBack : null // 每點擊某一項時候回調 }; this.cache = { }; this.init(options); } AccordionMenu.prototype = { constructor: AccordionMenu, init: function(options){ this.config = $.extend(this.config,options || {}); var self = this, _config = self.config, _cache = self.cache; // 渲染html結構 $(_config.containerCls).each(function(index,item){ self._renderHTML(item); // 處理點擊事件 self._bindEnv(item); }); }, _renderHTML: function(container){ var self = this, _config = self.config, _cache = self.cache; var ulhtml = $('<ul></ul>'); $(_config.menuArrs).each(function(index,item){ var lihtml = $('<li><h2>'+item.name+'</h2></li>'); if(item.submenu && item.submenu.length > 0) { self._createSubMenu(item.submenu,lihtml); } $(ulhtml).append(lihtml); }); $(container).append(ulhtml); _config.renderCallBack && $.isFunction(_config.renderCallBack) && _config.renderCallBack(); // 處理層級縮進 self._levelIndent(ulhtml); }, /** * 創建子菜單 * @param {array} 子菜單 * @param {lihtml} li項 */ _createSubMenu: function(submenu,lihtml){ var self = this, _config = self.config, _cache = self.cache; var subUl = $('<ul></ul>'), callee = arguments.callee, subLi; $(submenu).each(function(index,item){ var url = item.url || 'javascript:void(0)'; subLi = $('<li><a href="'+url+'">'+item.name+'</a></li>'); if(item.submenu && item.submenu.length > 0) { $(subLi).children('a').prepend('<img src="images/blank.gif" alt=""/>'); callee(item.submenu, subLi); } $(subUl).append(subLi); }); $(lihtml).append(subUl); }, /** * 處理層級縮進 */ _levelIndent: function(ulList){ var self = this, _config = self.config, _cache = self.cache, callee = arguments.callee; var initTextIndent = 2, lev = 1, $oUl = $(ulList); while($oUl.find('ul').length > 0){ initTextIndent = parseInt(initTextIndent,10) + 2 + 'em'; $oUl.children().children('ul').addClass('lev-' + lev) .children('li').css('text-indent', initTextIndent); $oUl = $oUl.children().children('ul'); lev++; } $(ulList).find('ul').hide(); $(ulList).find('ul:first').show(); }, /** * 綁定事件 */ _bindEnv: function(container) { var self = this, _config = self.config; $('h2,a',container).unbind(_config.type); $('h2,a',container).bind(_config.type,function(e){ if($(this).siblings('ul').length > 0) { $(this).siblings('ul').slideToggle('slow').end().children('img').toggleClass('unfold'); } $(this).parent('li').siblings().find('ul').hide() .end().find('img.unfold').removeClass('unfold'); _config.clickItemCallBack && $.isFunction(_config.clickItemCallBack) && _config.clickItemCallBack($(this)); }); } }; 代碼初始化方式如下： 代碼如下: $(function(){ new AccordionMenu({menuArrs:testMenu}); }); 大家也可以自己定義上面的JSON格式 然後引用我的css JS 也可以實現自己想要的效果 如果css上有自己的風格 也可以改寫css樣式！切忌！JSON格式一定要和我上面的一樣 且名字也要叫一樣的 就ok！初始化 如上 new AccordionMenu({menuArrs:testMenu}); 其中testMenu 就是上面定義的JSON格式。