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 相关文章推荐
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
May 03 Javascript
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
Nov 23 Javascript
通过jQuery源码学习javascript(二)
Dec 27 Javascript
javascript实现日期按月份加减
May 15 Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
Jan 15 Javascript
vue.js根据代码运行环境选择baseurl的方法
Feb 28 Javascript
JS高级技巧(简洁版)
Jul 29 Javascript
微信小程序wx.request拦截器使用详解
Jul 09 Javascript
如何在 ant 的table中实现图片的渲染操作
Oct 28 Javascript
vue实现顶部菜单栏
Nov 08 Javascript
JavaScript使用setTimeout实现倒计时效果
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
利用curl抓取远程页面内容的示例代码
2013/07/23 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
详解PHP队列的实现
2019/03/14 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
jQuery 如何实现一个滑动按钮开关
2016/12/01 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
2018/05/10 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
JavaScript中layim之整合右键菜单的示例代码
2021/02/06 Javascript
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
Python for Informatics 第11章 正则表达式(一)
2016/04/21 Python
Python实现字符串格式化输出的方法详解
2017/09/20 Python
Django跨域请求问题的解决方法示例
2018/06/16 Python
Python正则表达式匹配和提取IP地址
2019/06/06 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
django ManyToManyField多对多关系的实例详解
2019/08/09 Python
wxPython实现分隔窗口
2019/11/19 Python
设置jupyter中DataFrame的显示限制方式
2020/04/12 Python
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
2016/03/25 HTML / CSS
企业管理部经理岗位职责
2013/12/24 职场文书
申请任职学生会干部自荐书范文
2014/02/13 职场文书
平面设计专业求职信
2014/08/09 职场文书
校园广播稿100字
2014/10/06 职场文书
群众路线剖析材料怎么写
2014/10/09 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
音乐课外活动总结
2015/05/09 职场文书
人生遥控器观后感
2015/06/11 职场文书
2019七夕节祝福语36句,快来收藏吧
2019/08/06 职场文书
CSS3通过var()和calc()函数实现动画特效
2021/03/30 HTML / CSS
Python机器学习之逻辑回归
2021/05/11 Python