JSON无限折叠菜单特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 JSON无限折叠菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>JSON无限折叠菜单特效</title>
  <style type="text/css">
	.wrap-menu {width:778px; margin:0 auto; 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>
  <script src="js/jquery.min.js"></script>
  <script src="js/zzsc.js"></script>
 </head>
 <body>
	<div class="wrap-menu">
		
	</div>
	<script>
		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": ""
            }
        ]
    }
];
	$(function(){
		new AccordionMenu({menuArrs:testMenu});
	});
	</script>
</body>
</html>

JS代码(zzsc.js):

 function AccordionMenu(options){
	this.config ={
	containerCls:'.wrap-menu',// �������menuArrs:'',// JSON������������type:'click',// Ĭ��Ϊclick Ҳ����mouseoverrenderCallBack: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));
}
);
}
}
;

附件:下载该文件资源,减少时间成本(增值服务)