jquery implementation of the background system left menu click expand/Shrink Level two menu effect

Html:

<divclass="col-sm-3 col-md-2 Sidebar"> <divclass="Totalt"><a> Systems Management Systems </a></div> <ulclass="Menu"> <liclass="title"> <aclass="Item Item1"><spanclass="Glyphicon Glyphicon-chevron-down Myarrow"></span>Account Management</a> <ulclass="content"> <li> <aclass="Item ITEM2"href="right5.html"target=" Right"><spanclass="Glyphicon Glyphicon-step-backward"></span>Account Management</a> </li> <li> <aclass="Item ITEM2"href="right.html"target=" Right"><spanclass="Glyphicon Glyphicon-step-backward"></span>Account Management</a></li> <li> <aclass="Item ITEM2"href="right2.html"target=" Right"><spanclass="Glyphicon Glyphicon-step-backward"></span>Account Management</a></li> </ul> </li> <liclass="title"> <aclass="Item Item1"><spanclass="Glyphicon Glyphicon-chevron-down Myarrow"></span>Account Management</a> <ulclass="content"> <li> <aclass="Item ITEM2"href="#"><spanclass="Glyphicon Glyphicon-step-backward"></span>Account Management</a> </li> <li> <aclass="Item ITEM2"href="#"><spanclass="Glyphicon Glyphicon-step-backward"></span>Account Management</a></li> <li> <aclass="Item ITEM2"href="#"><spanclass="Glyphicon Glyphicon-step-backward"></span>Account Management</a></li> </ul> </li> <liclass="title"> <aclass="Item Item1"><spanclass="Glyphicon Glyphicon-chevron-down Myarrow"></span>Account Management</a> <ulclass="content"> <li> <aclass="Item ITEM2"href="#"> <spanclass="Glyphicon Glyphicon-step-backward"></span>Account Management</a> </li> <li> <aclass="Item ITEM2"href="#"><spanclass="Glyphicon Glyphicon-step-backward"></span>Account Management</a></li> <li> <aclass="Item ITEM2"href="#"><spanclass="Glyphicon Glyphicon-step-backward"></span>Account Management</a></li> </ul> </li> </ul></div>

Js:

$(". title. Item1"). Click (function () {$ ( This). Next (". Content"). Slidetoggle ();//implementation of the two-level menu expansion shrink function $ ( This). Find ("span"). Toggleclass ("Glyphicon Glyphicon-chevron-down");//The conversion effect of the icon when the menu click is realized $ ( This). Find ("span"). Toggleclass ("Glyphicon glyphicon-chevron-right");})

CSS is not posted, using jquery to achieve this vertical accordion menu is really much easier.

jquery implementation of the background system left menu click expand/Shrink Level two menu effect