最近看了一篇關於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 879083421@qq.com */ 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格式。