最近看了一篇關于JSON無限折疊菜單的文章 感覺寫的不錯，也研究了下代碼，所以用自己編碼方式也做了個demo 其實這樣的菜單項在我們網站上或者項目導航菜單項很常見的一種效果，特別是在一些電子商務網上上左側有分類是很常見的 或者說導航菜單有下拉效果也是很常見的，但是他們都是做死的 也就是頁面上代碼直接寫死的 然后實現那種下拉效果 而今天我們是通過JSON格式來自動生成的，或者可以說 要做這種折疊菜單效果 只需要開發人員提供我們前端開發這種JSON格式或者我們前端可以定這樣的格式也就ok了 其他的都可以直接引用這個代碼進去。下面給大家來分享下我的JS代碼！
下面我們來看看具體的效果如下：
下面我們來看看JSON個格式是個什么樣的 格式如下：
JS代碼如下：
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));
});
}
};
new AccordionMenu({menuArrs:testMenu}); 其中testMenu 就是上面定義的JSON格式。
新聞熱點
疑難解答
