Accordion Effect Menu

Js:

$ (function () {/***************** menu accordion effect Start******************/var Accordion = function (el, multiple) {This.el = el | | {};this.multiple = multiple | | false;//Variables Privadasvar menus = This.el.find ('. menu ');//Eventomenus.on (' click ', {el:this.el, multiple: This.multiple}, This.dropdown)}accordion.prototype.dropdown = function (e) {var $el = E.data.el; $this = $ (this), $next = $t His.next (); $next. Slidetoggle (); $this. Parent () Toggleclass (' open '), if (!e.data.multiple) {$el. Find ('. submenu '). Not ($next). Slideup (). Parent (). Removeclass (' Open ');};} var accordion = new Accordion ($ ('. Accordion '), false),/***************** menu accordion effect end******************/});

Html:

　　　　　<!--aside menu start--><div id= "Aside-menu" ><ul id= "accordion" class= "accordion" ><li><di V class= "menu" ><i class= "Glyphicon glyphicon-tasks" ></i> <span> Inbound management </span><i class= " Glyphicon glyphicon-chevron-right pull-right "></i></div><ul class=" submenu "><li><a href= "#" > Purchase order </a></li><li><a href= "#" > Goods receipt </a></li><li><a href= "#" > Warehousing Plan </a></li><li><a href= "#" > Group Shelves </a></li><li><a href= "#" > Purchase return </a></li><li><a href= "#" > Display information </a></li><li><a href= "#" > Purchase Invoice </a></li></ul></li><li><div class= "menu" ><i class= "Glyphicon Glyphicon-user "></i> <span> Outbound management </span><i class=" Glyphicon glyphicon-chevron-right Pull-right "></i></div><ul class=" submenu "><li><a href=" # "> Order </a></li& Gt; <li><a href= "#" > Outbound Plan </a></li><li><a href= "#" > Outbound Order </a></li>< Li><a href= "#" > Sales return </a></li><li><a href= "#" > Sales Invoice </a></li></ul ></li><li><div class= "menu" ><i class= "Glyphicon glyphicon-user" ></i> <span> Inventory management </span><i class= "Glyphicon glyphicon-chevron-right pull-right" ></i></div><ul class= "Submenu" ><li><a href= "#" > Shelf diagram </a></li><li><a href= "#" > Counting Plan </a></ Li><li><a href= "#" > Counting Jobs </a></li><li><a href= "#" > Inventory adjustment </a></li> </ul></li></ul></div><!--aside menu end--

Accordion Effect Menu