JSON無限折疊菜單編寫實(shí)例
最近看了一篇關(guān)于JSON無限折疊菜單的文章 感覺寫的不錯，也研究了下代碼，所以用自己編碼方式也做了個demo 其實(shí)這樣的菜單項(xiàng)在我們網(wǎng)站上或者項(xiàng)目導(dǎo)航菜單項(xiàng)很常見的一種效果，特別是在一些電子商務(wù)網(wǎng)上上左側(cè)有分類是很常見的 或者說導(dǎo)航菜單有下拉效果也是很常見的，但是他們都是做死的 也就是頁面上代碼直接寫死的 然后實(shí)現(xiàn)那種下拉效果 而今天我們是通過JSON格式來自動生成的，或者可以說 要做這種折疊菜單效果 只需要開發(fā)人員提供我們前端開發(fā)這種JSON格式或者我們前端可以定這樣的格式也就ok了 其他的都可以直接引用這個代碼進(jìn)去。下面給大家來分享下我的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了 且上面的參數(shù)名 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樣式可以自己下 沒有關(guān)系！
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傳進(jìn)來的數(shù)據(jù)
type : 'click', // 默認(rèn)為click 也可以mouseover
renderCallBack : null, // 渲染html結(jié)構(gòu)后回調(diào)
clickItemCallBack : null // 每點(diǎn)擊某一項(xiàng)時候回調(diào)
};
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結(jié)構(gòu)
$(_config.containerCls).each(function(index,item){
self._renderHTML(item);
// 處理點(diǎn)擊事件
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();
// 處理層級縮進(jìn)
self._levelIndent(ulhtml);
},
/**
* 創(chuàng)建子菜單
* @param {array} 子菜單
* @param {lihtml} li項(xiàng)
*/
_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);
},
/**
* 處理層級縮進(jìn)
*/
_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 也可以實(shí)現(xiàn)自己想要的效果 如果css上有自己的風(fēng)格 也可以改寫css樣式！切忌！JSON格式一定要和我上面的一樣 且名字也要叫一樣的 就ok！初始化 如上
new AccordionMenu({menuArrs:testMenu}); 其中testMenu 就是上面定義的JSON格式。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)連連看游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
本文主要介紹了JS?簡單實(shí)現(xiàn)拖拽評星，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
Function是javascript里最常用的一個概念，javascript里的function是最容易入手的一個功能，但它也是javascript最難理解最難掌握的一個概念。這篇文章主要介紹了JavaScript中的Function類型的相關(guān)資料，一起看下吧2016-07-07
本篇文章主要是對tr的隱藏和顯示問題進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
JavaScript如何將后端獲取到的byte數(shù)組轉(zhuǎn)為文件
這篇文章主要給大家介紹了關(guān)于JavaScript如何將后端獲取到的byte數(shù)組轉(zhuǎn)為文件的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-04-04
詳解javascript實(shí)現(xiàn)自定義事件
這篇文章主要為大家介紹了javascript實(shí)現(xiàn)自定義事件的方法，自定義事件，顧名思義，就是自己定義事件類型，自己定義事件處理函數(shù)，javascript如何實(shí)現(xiàn)自定義事件,需要了解的朋友可以參考下2016-01-01
JavaScript實(shí)現(xiàn)封閉區(qū)域布爾運(yùn)算的示例代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)封閉區(qū)域布爾運(yùn)算的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
echarts實(shí)現(xiàn)雷達(dá)圖的詳細(xì)步驟
這篇文章主要給大家介紹了關(guān)于echarts實(shí)現(xiàn)雷達(dá)圖的詳細(xì)步驟,雷達(dá)圖(Radar?Chart)是一種信息豐富的可視化工具,其中多個變量（三個或更多）在二維平面上進(jìn)行比較,文中給出了完整的代碼示例,需要的朋友可以參考下2024-01-01
分享5個小技巧讓你寫出更好的 JavaScript 條件語句
在使用 JavaScript 時，我們常常要寫不少的條件語句。這里有五個小技巧，可以讓你寫出更干凈、漂亮的條件語句。需要的朋友跟隨小編一起學(xué)習(xí)吧2018-10-10
企業(yè)微信掃碼登錄網(wǎng)頁功能實(shí)現(xiàn)代碼
這篇文章主要介紹了企業(yè)微信掃碼登錄網(wǎng)頁功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-01-01