JSON無(wú)限折疊菜單編寫實(shí)例
最近看了一篇關(guān)于JSON無(wú)限折疊菜單的文章 感覺(jué)寫的不錯(cuò)，也研究了下代碼，所以用自己編碼方式也做了個(gè)demo 其實(shí)這樣的菜單項(xiàng)在我們網(wǎng)站上或者項(xiàng)目導(dǎo)航菜單項(xiàng)很常見(jiàn)的一種效果，特別是在一些電子商務(wù)網(wǎng)上上左側(cè)有分類是很常見(jiàn)的 或者說(shuō)導(dǎo)航菜單有下拉效果也是很常見(jiàn)的，但是他們都是做死的 也就是頁(yè)面上代碼直接寫死的 然后實(shí)現(xiàn)那種下拉效果 而今天我們是通過(guò)JSON格式來(lái)自動(dòng)生成的，或者可以說(shuō) 要做這種折疊菜單效果 只需要開發(fā)人員提供我們前端開發(fā)這種JSON格式或者我們前端可以定這樣的格式也就ok了 其他的都可以直接引用這個(gè)代碼進(jìn)去。下面給大家來(lái)分享下我的JS代碼！
下面我們來(lái)看看具體的效果如下：
下面我們來(lái)看看JSON個(gè)格式是個(gè)什么樣的 格式如下：
var testMenu=[
{
"name": "一級(jí)菜單",
"submenu": [
{
"name": "二級(jí)菜單",
"url": ""
},
{
"name": "二級(jí)菜單",
"url": ""
}
]
},
{
"name": "一級(jí)菜單",
"submenu": [
{
"name": "二級(jí)菜單",
"url": ""
},
{
"name": "二級(jí)菜單",
"submenu": [
{
"name": "三級(jí)菜單",
"submenu": [
{
"name": "四級(jí)菜單",
"url": ""
}
]
},
{
"name": "三級(jí)菜單",
"url": ""
}
]
},
{
"name": "二級(jí)菜單",
"url": ""
},
{
"name": "二級(jí)菜單",
"submenu": [
{
"name": "三級(jí)菜單",
"submenu": [
{
"name": "四級(jí)菜單",
"url": ""
},
{
"name": "四級(jí)菜單",
"submenu": [
{
"name": "五級(jí)菜單",
"url": ""
},
{
"name": "五級(jí)菜單",
"url": ""
}
]
}
]
},
{
"name": "三級(jí)菜單",
"url": ""
}
]
},
{
"name": "二級(jí)菜單",
"url": ""
}
]
},
{
"name": "一級(jí)菜單",
"submenu": [
{
"name": "二級(jí)菜單",
"url": ""
},
{
"name": "二級(jí)菜單",
"url": ""
},
{
"name": "二級(jí)菜單",
"url": ""
}
]
}
];
只要這種JSON格式就ok了 且上面的參數(shù)名 name submenu url是叫這樣的名字就可以了 ，然后直接可以在頁(yè)面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樣式可以自己下 沒(méi)有關(guān)系！
JS代碼如下：
/**
* JSON無(wú)限折疊菜單
* @constructor {AccordionMenu}
* @param {options} 對(duì)象
* @date 2013-12-13
* @author tugenhua
* @email 879083421@qq.com
*/
function AccordionMenu(options) {
this.config = {
containerCls : '.wrap-menu', // 外層容器
menuArrs : '', // JSON傳進(jìn)來(lái)的數(shù)據(jù)
type : 'click', // 默認(rèn)為click 也可以mouseover
renderCallBack : null, // 渲染html結(jié)構(gòu)后回調(diào)
clickItemCallBack : null // 每點(diǎn)擊某一項(xiàng)時(shí)候回調(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í)縮進(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í)縮進(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格式。
- js實(shí)現(xiàn)選項(xiàng)卡內(nèi)容切換以及折疊和展開效果【推薦】
- Javascript實(shí)現(xiàn)代碼折疊功能
- js無(wú)限級(jí)折疊菜單精簡(jiǎn)版
- js 全兼容可高亮二級(jí)緩沖折疊菜單
- 原生Js與jquery的多組處理, 僅展開一個(gè)區(qū)塊的折疊效果
- js實(shí)現(xiàn)簡(jiǎn)單折疊、展開菜單的方法
- javascript仿qq界面的折疊菜單實(shí)現(xiàn)代碼
- Js操作樹節(jié)點(diǎn)自動(dòng)折疊展開的幾種方法
- JS+CSS實(shí)現(xiàn)的簡(jiǎn)單折疊展開多級(jí)菜單效果
- jquery實(shí)現(xiàn)折疊菜單效果【推薦】
相關(guān)文章
javascript與css3動(dòng)畫結(jié)合使用小結(jié)
本文給大家講述的是如何使用javascript結(jié)合CSS動(dòng)畫來(lái)實(shí)現(xiàn)一些占用資源更少，更優(yōu)化的動(dòng)畫效果，思路十分巧妙，這里推薦給小伙伴們參考下。2015-03-03
HTML Table 空白單元格補(bǔ)全的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇HTML Table 空白單元格補(bǔ)全的簡(jiǎn)單實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
這篇文章主要介紹的是通過(guò)js簡(jiǎn)單實(shí)現(xiàn)交換Li的值,需要的朋友可以參考下2014-05-05
如果說(shuō)讓JavaScript讀取站點(diǎn)上一文本文件,那不過(guò)是個(gè)再簡(jiǎn)單不了的事了；但若說(shuō)要換成一個(gè)二進(jìn)制的文件，并且是完全靜態(tài)的讀取,那似乎有點(diǎn)天方夜譚了。2009-04-04
說(shuō)到瀏覽器中的event,相信不少人都很頭疼,ie的event大部分時(shí)候都可以獲取到2009-08-08
javascript鼠標(biāo)跟隨運(yùn)動(dòng)3種效果（眼球效果，蘋果菜單，方向跟隨）
在很多網(wǎng)站上能看到圖片跟隨鼠標(biāo)移動(dòng)的JS特效，其實(shí)做法很簡(jiǎn)單，本文就介紹了很多javascript鼠標(biāo)跟隨運(yùn)動(dòng)，在這里與大家分享下。2016-10-10
disable-devtool禁用web開發(fā)者工具保護(hù)網(wǎng)頁(yè)源碼
這篇文章主要為大家介紹了disable-devtool禁用web開發(fā)者工具保護(hù)網(wǎng)頁(yè)源碼的使用，防止源碼泄露保護(hù)網(wǎng)站源碼的最佳解決方案，一行代碼就可以搞定，有需要的可以學(xué)習(xí)參考下2023-11-11
JavaScript實(shí)現(xiàn)計(jì)算多邊形質(zhì)心的方法示例