JSON infinite folding menu writing example_javascript skills-JS Tutorial-php.cn

I recently read an article about JSON infinite folding menu and thought it was well written. I also studied the code, so I also made a demo using my own coding method. In fact, such menu items are on our website or project navigation menu items. It is a very common effect, especially on some e-commerce websites. It is very common to have categories on the left side or it is also very common for the navigation menu to have a drop-down effect. However, they are all done to death, that is, the code on the page is written directly. And then to achieve that drop-down effect, today we automatically generate it through JSON format, or it can be said that to do this folding menu effect, we only need the developer to provide us with the JSON format for front-end development, or our front-end can set such a format. Everything else can directly reference this code. Let me share with you my JS code!

Let’s take a look at the specific effects as follows:

JSON infinite folding menu writing example_javascript skills

Let’s take a look at what the JSON format looks like. The format is as follows:

Copy code The code is as follows:

var testMenu=[
                                                                                                                                                              . ",
 "url": ""
 },
                                         "
                                                                    
                                                                                                                      "url": ""
                                                                                                                                                                                                                             Menu ", " Submenu ": [
 {
" name ":" Level 4 Menu ", 
" URL ":" 
} 

}, 
                                                                                                             }
                                                                                                                                                          "Secondary menu",
        "url": ""
         },
                                                                                    "name": "Third-level menu",
 "submenu": [
                                                                                                                     ""
                                                                                                                                                                                                 🎜>                 "submenu": [
                                            "name": "Five-level menu",
                                            "name": " Five-level menu",
                                              ]
                                                                                 ,
                                                                                                                                                                                                                                                                                          : "Second level menu",
 "url": ""
 }
 ]
 },
 "name": "First level menu",
 " submenu": [
                                                                                                             " 🎜> "name": "Second level menu ",
 "url": ""
 },
                                         "

 }
];


As long as this JSON format is ok and the above parameter name name submenu url is called this name, then you can directly add it to the page HTML as follows :





Copy code


 The code is as follows:


 

The CSS code is as follows:

Copy code The code is as follows:

It doesn’t matter if you can set the css style yourself!

The JS code is as follows:

Copy code

The code is as follows:

/**
* JSON无限折叠菜单
* @constructor {AccordionMenu}
* @param {options} 对象
* @date 2013-12-13
* @author tugenhua
* @email 879083421@qq.com
*/

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 = $('

');
$(_config.menuArrs).each(function(index,item){
var lihtml = $('

'+item.name+'

');

            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 = $('

'),
            callee = arguments.callee,
            subLi;

        $(submenu).each(function(index,item){
            var url = item.url || 'javascript:void(0)';

subLi = $('

'+item.name+'

');
if(item.submenu && item.submenu.length > 0) {

                $(subLi).children('a').prepend('');
                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');
}

. ');
_config.clickItemCallBack && $.isFunction(_config.clickItemCallBack) && _config.clickItemCallBack($(this));

});

}
};

The code initialization method is as follows:

Copy code The code is as follows:

$(function(){
 new AccordionMenu( {menuArrs:testMenu});
});

You can also define the above JSON format yourself and then quote my css JS. You can also achieve the effect you want if you have your own css The style can also be rewritten in css style! Don’t! The JSON format must be the same as what I said above and the name must be the same. That’s ok! Initialization as above
new AccordionMenu({menuArrs:testMenu}); where testMenu is the JSON format defined above.

JSON infinite folding menu demo download