JSON infinite collapse Menu Authoring instance

  This article mainly introduces the JSON infinite folding menu to write examples, the need for friends can refer to the

Recently read an article about the JSON infinite folding menu Feeling good writing, also studied the next code, so use their own coding way to do a demo in fact, such a menu item on our website or project navigation menu items are very common effect, especially in some e-commerce online on the left of the classification is very common Or the navigation menu has a drop-down effect is also very common, but they are dead is the page code directly written dead and then achieve that kind of drop-down effect today we are automatically generated by the JSON format, or can be said to do this folding menu effect Only developers are required to provide us with the JSON format of the front-end development or we can make the format so that the other can directly reference this code to go in. Below give everybody to share under my JS code!   Below let's see what the JSON format looks like: The   Code code is as follows: Var testmenu=[    {        "name": "First Menu"         "submenu": [            {                "name": "Level Two menu",      ,           "url": ""     &NBSP ;      },             {              &NBSP ; "Name": "Level Two menu",                 "url": "    &nbsp       ; }        ]    },     {        "name": "ALevel menu "       " submenu ": [            {        &NB Sp       "name": "Level Two menu",      ,           "url": ""     &NBSP ;      },             {              &NBSP ; "Name": "Level Two menu",                 "submenu": [          &N Bsp                                 "name": "Level Three menu",                         "submenu": [    &NB Sp                       {            & nbsp                   "name": "Level Four Menu",             & NBsp                   "url": ""                             down                     & nbsp  ]                    },           &NBSP ;                                 "name": "Level Three menu",                         "url": "                    [               ]   &NBSP ;        },             {            &NBSP ;   "name": "Two Level menu",                 "url": "    &nbsp     ;   },             {                "name": "Level Two menu", &NB Sp               "submenu": [                &NBS P   {                        "name": "Level Three menu",                         "submenu": [          &NB Sp                 {                  & nbsp             "name": "Level Four Menu",          ,         & nbsp             "url": "                           },                             {                                "Name": "Level Four Menu",                               & nbsp "Submenu": [                              &NBS P     {                              & nbsp         "name": "Level five menus",              ,         & nbsp                 "url": ""                                    },                                     {            & NBsP                           "name": "Level Five Menu",     & nbsp                                   "ur L ":" "                                &NB Sp                                                              }                        ]                 & nbsp  },                     {          &NBSP ;             "name": "Level Three menu",          ,         & NBsP     "url": ""                           &NBSP ;        ]            },             {&NB Sp               "name": "Level Two menu",          ,       URL ":" "           }        ]    },     {        "name": "Level Menu"         "submenu": [            {                 "name": "Level Two menu",      ,           "url": "           },             {    &N Bsp           "name": "Level Two menu",         &nbsp       "url": "" ;   &nbsp      },             {              &NBSP ; "Name": "Level Two menu",                 "url": "    &nbsp       ; }        ]    }];   As long as this JSON format is OK and the above Parameter name submenu URL is called such a name on it can then be directly in the page HTML below:     Copy code code as follows: <div class= "wrap-m ENU "></div>   CSS code is as follows:   code is as follows: <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;}     . Wrap-menu ul li{text-indent:3em white-space:nowrap;}     Wrap-menu ul Li h2{cursor:pointer; height:100%; w idth:100%; margin:0 0 1px 0; font:12px/31px ' song body '; Color: #fff; background:red;}     Wrap-menu ul Li a{display:block; outline:none; 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 Nd: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 styles can have no relationship on their own!   JS code as follows:     code as follows:/**  * json infinite collapse menu  * @constructor {accordionmenu}  * @param {options} object  * @date 2013-12-13  * @author tugenhua  * @email 879083421@qq.com  */   function accordion Menu {    This.config = {        CONTAINERCLS        : '. Wrap -menu ',                //outer container         Menuarrs           &NBSP:   ",                        // json incoming data         type               &NBSP:   ' click ',      ,              //default to click can also MouseOver         rendercallback     &nbsp:  null,                      //render HTML structure after callback         clickitemcallback  : null &nbsp ;                      ///Click on a certain time to recall    };     This.cache = {     };     This.init (options); &NBSP}      accordionmenu.prototype = {      Constructor:accordionmenu,     &NB Sp Init:function (options) {        This.config = $.extend (This.config,options | | {});         var self = This,           &NBSp _config = self.config,             _cache = Self.cache;          //render HTML structure         $ (_CONFIG.CONTAINERCLS). each (function (index,it EM) {              self._renderhtml (item);             &N Bsp Handle Click events             SELF._BINDENV (item);        });    },     _renderhtml:function (container) {        var self = this,   &nbsp ;         _config = self.config,             _cache = Self.cache;         var ulhtml = $ (' <ul></ul> ');         $ (_config.menuarrs). each (function (Index,item) {            var l ihtml = $ (' <li><h2> ' +item.name+ ' </h2></li> ');               if (ITEM.SUbmenu && item.submenu.length > 0 {                Self._createsubmen U (item.submenu,lihtml);                         $ (ulhtml) append (lihtml);        });         $ (container). append (ulhtml);           _config.rendercallback && $.isfunction (_config.rendercallback) && _ Config.rendercallback ();          //processing level indent         self._levelindent (ulhtml);    }    /**      * Create submenu      * @param {array} submenu   &nbs p;* @param {lihtml} li item      */    _createsubmenu:function (submenu,lihtml) {    &NBSP ;   var self = This,             _config = self.config,         &NBSP ;   _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) {      &N Bsp           $ (Subli) Children (' a ') prepend (' <img src= "images/blank.gif" alt= ""/> ");                 callee (Item.submenu, Subli);                         $ (Subul) append (Subli);        });         $ (lihtml). Append (Subul);    }   /**      * processing level indent      */    _levelindent:function (ullist) {&nbs P       var self = This,      ,       _config = self.config,     &NBSP ;       _cache = Self.cache,             callee = Arguments.callee;           var inittextindent = 2,             Lev = 1,   &nbsp ;         $OUL = $ (ullist);           while ($oUl. Find (' ul '). Length > 0) {            Inittex Tindent = parseint (inittextindent,10) + 2 + ' em ';              $oUl children () children (' ul '). addclass (' lev-' + lev)                        . Childre N (' Li '). css (' text-indent ', inittextindent);             $oUl = $oUl. ChildrEn (). Children (' ul ');             lev++;        }         $ (ullist). Find (' ul '). Hide ();         $ (ullist). Find (' Ul:first '). Show ();        },    /**      * binding event      */    _BINDENV: Function (container) {        var self = This,             _config = SE Lf.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));          });    }  }; The     Code initialization method is as follows:       Code as follows: $ (function () {    new Accordionmenu ({menuarrs:testmenu});}) ;   You can also define the above JSON format and then reference my CSS JS can also achieve their desired effect if the CSS has its own style can also be rewritten CSS style! Avoid! The JSON format must be the same as the one above me and the name will be the same ok! Initialize as above     new Accordionmenu ({menuarrs:testmenu}); Where Testmenu is the JSON format defined above.