Navigation bar actions--show and hide lists and add styles

First, make sure that the parent class of the navigation bar is bui-side-menu, each need to show and hide the list by child1 (before child, after the number named), and add the attribute data-submenu= ' 1 ' to the clicked parent list; Add the active class style to the a tag.

Next, write jquery.

Example:

HTML code:

<ul class= "Bui-side-menu bui-menu" style= "height:100%" >
	<li class= "Bui-menu-item Menu-second" >
		<div class= "Bui-menu-title" >
			<a data-submenu= "1" href= "javascript:void (0);" >
				<span class= "Bui-menu-title-text" > Parent list </span>
			</a>					
		</div>
		<ul id= "Child1" class= "Bui-menu" style= "Display:none" >
			<li class= "Bui-menu-item menu-leaf" >
				<a href= " Http://localhost/AppAdmin/index.php?m=UserData&act=newAddShow&timeStart&timeEnd&dateType "> <em> Sub-list </em></a>
			</li>
		</ul>
	</li>
</ul>

jquery Code:

$ (function () {
	//Left nav bar
	var menu = $ ('. Bui-side-menu '). On (' Click ', ' a ', function () {
		menu.find (' a '). Removeclass (' active ')
		var submenu = $ (this). Data (' submenu ');
		if (submenu) {
			submenu = $ (' #child ' +submenu);
			if (submenu.is (': Hidden ')) {
				submenu.show ();
				$ (this). addclass (' active ')
			}else{
				submenu.hide ();
				$ (this). Removeclass (' active ');
			}
		} else{
			$ (this). addclass (' active ');}})