JSON无限折叠菜单编写实例


Posted in Javascript onDecember 16, 2013

最近看了一篇关于JSON无限折叠菜单的文章 感觉写的不错,也研究了下代码,所以用自己编码方式也做了个demo 其实这样的菜单项在我们网站上或者项目导航菜单项很常见的一种效果,特别是在一些电子商务网上上左侧有分类是很常见的 或者说导航菜单有下拉效果也是很常见的,但是他们都是做死的 也就是页面上代码直接写死的 然后实现那种下拉效果 而今天我们是通过JSON格式来自动生成的,或者可以说 要做这种折叠菜单效果 只需要开发人员提供我们前端开发这种JSON格式或者我们前端可以定这样的格式也就ok了 其他的都可以直接引用这个代码进去。下面给大家来分享下我的JS代码!

下面我们来看看具体的效果如下:

JSON无限折叠菜单编写实例

下面我们来看看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格式。

Javascript 相关文章推荐
基于jquery的一行代码轻松实现拖动效果
Dec 28 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
Jun 17 Javascript
jQuery在ul中显示某个li索引号的方法
Mar 17 Javascript
JS常用函数和常用技巧小结
Oct 15 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
Oct 11 Javascript
javascript计算对象长度的方法
Oct 25 Javascript
微信小程序之多文件下载的简单封装示例
Jan 29 Javascript
基于 D3.js 绘制动态进度条的实例详解
Feb 26 Javascript
vue 实现数字滚动增加效果的实例代码
Jul 06 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
Jul 23 Javascript
JS立即执行函数功能与用法分析
Jan 15 Javascript
vue 使用v-for进行循环的实例代码详解
Feb 19 Javascript
使用JSLint提高JS代码质量方法分享
Dec 16 #Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 #Javascript
利用js动态添加删除table行的示例代码
Dec 16 #Javascript
js判断undefined类型,undefined,null, 的区别详细解析
Dec 16 #Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
Dec 16 #Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 #Javascript
js中AppendChild与insertBefore的用法详细解析
Dec 16 #Javascript
You might like
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
php下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
PHP中static关键字原理的学习研究分析
2011/07/18 PHP
php正则匹配html中带class的div并选取其中内容的方法
2015/01/13 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
浅析jQuery对select操作小结(遍历option,操作option)
2013/07/04 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
分享一则javascript 调试技巧
2015/01/02 Javascript
js实现Select头像选择实时预览代码
2015/08/17 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
mongoose中利用populate处理嵌套的方法
2017/05/26 Javascript
vue2.0模拟锚点的实例
2018/03/14 Javascript
js实现json数组分组合并操作示例
2019/02/12 Javascript
微信公众平台获取access_token的方法步骤
2019/03/29 Javascript
JavaScript实现HTML导航栏下拉菜单
2020/11/25 Javascript
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
举例讲解Python中metaclass元类的创建与使用
2016/06/30 Python
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
python画图的函数用法以及技巧
2019/06/28 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
美国网上眼镜商城:Zenni Optical
2016/11/20 全球购物
英国老牌潮鞋店:Offspring
2019/08/19 全球购物
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
Shell如何接收变量输入
2012/09/24 面试题
Java编程面试题
2016/04/04 面试题
企业节能减排实施方案
2014/03/19 职场文书
初中教师业务学习材料
2014/05/12 职场文书
毕业实习计划书
2015/01/16 职场文书
跑出一片天观后感
2015/06/08 职场文书
python神经网络学习 使用Keras进行回归运算
2022/05/04 Python
spring 项目实现限流方法示例
2022/07/15 Java/Android